源码搜藏网
网站首页
网站源码
加入VIP，免费下载全站VIP素材开通VIP
PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码
CMS模板
加入VIP，免费下载全站VIP素材开通VIP
织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码 pbootcms
安卓源码
加入VIP，免费下载全站VIP素材开通VIP
VIP源码 控件分类 功能分类 技术博客
免费源码
php源码 asp源码 .NET源码 java源码 其他源码
会员特权
广告合作
●●●
加入VIP，免费下载全站素材开通VIP
设计素材 网页特效 网页设计作业 开发教程
全部作品
全部作品
终身源码
vip源码
安卓源码
开发教程
当前位置：首页 > 开发教程 > html5教程 >

HTML5边玩边学（1）画布实现方法

时间：2014-06-12 08:41 来源： 作者： 收藏

Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? 点评：Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢 一、<canvas>标签

Html5 引入了一个新的 <canvas> 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢

新闻链接：Google声称Chrome7浏览器将提速60倍

<canvas>标签的用法非常简单，如下：

复制代码代码如下:
<canvas id="tutorial" width="150" height="150" style="background-color:red;">
你的浏览器不支持 Canvas 标签
</canvas>


<canvas>标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。

你可以在 这里 找到关于 <canvas> 标签的更多内容。

标签中间的内容是替换内容，如果用户的浏览器不支持 <canvas> 标签，这段内容就会被显示出来；如果用户的浏览器支持 <canvas> 标签，则这段内容将被忽略。

上面的 <canvas> 代码显示效果如下：

你的浏览器不支持 Canvas 标签

如果你用的是IE浏览器，可能只能看到一个提示；如果你用的是谷歌浏览器或者火狐浏览器，你就可以看到一个红色的方块区域。
二、渲染上下文 Rendering Context
其实光有 <canvas> 标签我们并不能作任何事情，玩过 Windows 编程的同学都知道，在 Windows 里面绘图先要得到一个设备上下文 DC ,在 <canvas> 标签上绘图也需要先得到一个渲染上下文，我们的图形并不是直接画到屏幕上的，而是先画到上下文(Context)上，然后再刷新到屏幕上面的。
题外话： 为什么要整出一个“上下文”这么复杂的概念呢？因为有了上下文对象，我们就可以让各种不同的图形设备在我们眼里面看起都是一个样，我们只需要专注于绘图，其他的工作就让操作系统和浏览器去操心吧，说白了就是把各式各样的具体变成统一的抽象，从而减轻我们的负担。
获取上下文非常简单，只需要如下两行代码：
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 "2d"，不久的将来他可能会支持参数 "3d"，你一定明白那意味着什么，让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象 ，即渲染上下文对象，你可以在 这里 找到关于它的更多内容，都是一些绘图方法。

三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外，我们还可以通过脚本的方式来检查浏览器是否支持 canvas ，方法很简单，判断 getContext 函数是否存在即可，代码如下：

复制代码代码如下:
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert("支持 <canvas> 标签");
} else {
alert("不支持 <canvas> 标签");
}


四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出



提示：您可以先修改部分代码再运行
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器

标签：源码网站源码Html5
上一篇：html5 学习简单的拾色器
下一篇：HTML5边玩边学（2）基础绘图实现方法

html5游戏开发-简单老虎机

HTML5 UTF-8 中文乱码的解决方法

html5移动开发中的如何对事件进行监听和处

html5记忆翻牌游戏实现思路及代码

html5指南-6.如何创建离线web应用程序实现

具有定时创建HTML5（和JavaScript）迷宫游

仿酷狗html5手机音乐播放器主要部分代码

HTML5图片预览实例分享

HTML5的结构和语义(1):前言

html5通过canvas实现刮刮卡效果示例分享

利用HTML5中Geolocation获取地理位置调用Go

html5 Canvas画图教程(10)—把面拆成线条模

html5教程阅读排行

最新文章

热门源码

  • 飞天侠淘宝客
  • php软件下载
  • 网站代码
  • 网页源代码
  • 网站模板
  • 免费个人网站模板
  • asp源代码
  • php问答系统下载
  • 登录界面代码
  • 商城源码
  • 源代码
  • 个人网页模板
  • 素材解析平台
  • 开源网店
  • 网页制作代码
  • 网页设计模板
  • 超级群
  • html代码大全
  • 免费网站模板下载
  • 企业网站模板下载
  • 整站程序
  • 网页代码
  • 免费商业源码
  • 网站源码免费下载
  • php 源码
  • asp 源码
  • 呼叫中心源码
  • 网页模板下载
  • 后台管理系统模板
  • 登录界面模板
  • 免费网
  • 源码下载
  • php cms
  • asp代码
  • 网站源码出售
  • 免费企业网站
  • html网页模板
  • 网站源代码
  • 后台
  • 源代码 下载
  • 免费源码下载
  • 网站模板免费下载
  • php代码
  • 网址导航源码
  • 网站源代码下载
  • 电子书籍
  • 网站下载
  • 编程电子书
  • asp.net源码
  • 免费网页模板

    • 服务咨询

    QQ-xxxxxxxx

    （周一至周六 9:00——18:00） 在线客服

    整站源码

    织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码

    网站模板

    PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码

    免费源码

    协同办公 留言日记 社区论坛 上传下载 电子商务 广告排行 投票调查

    关于我们

    网站公告 关于我们 免责声明 注册协议 联系我们
    Copyright © 版权所有 本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！