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 相关文章推荐
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
CSS 伪元素::marker详解
Jun 26 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
指针和引用有什么区别
2013/01/13 面试题
机电专业大学生求职信
2013/10/04 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
初三开学计划书
2014/04/27 职场文书
幼儿园标语大全
2014/06/19 职场文书
认真学习保证书
2015/02/26 职场文书
财务会计求职信范文
2015/03/20 职场文书
烈士陵园观后感
2015/06/08 职场文书