HTML5边玩边学(1)画布实现方法


Posted in HTML / CSS onSeptember 21, 2010

一、<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 浏览器
HTML / CSS 相关文章推荐
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
html5 学习简单的拾色器
Sep 03 #HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 #HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 #HTML / CSS
用HTML5.0制作网页的教程
May 30 #HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 #HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 #HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 #HTML / CSS
You might like
PHP获取MAC地址的函数代码
2011/09/11 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
微信支付扫码支付php版
2016/07/22 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP getName()函数讲解
2019/02/03 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
用htc组件制作windows选项卡
2007/01/13 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
PyQt5 多窗口连接实例
2019/06/19 Python
基于FME使用Python过程图解
2020/05/13 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
大客户经理岗位职责
2015/04/09 职场文书
房屋所有权证明
2015/06/19 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS