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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 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下使用iconv需要注意的问题
2010/11/20 PHP
PHP页面中文乱码分析
2013/10/29 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JavaScript中的类继承
2010/11/25 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python实现局域网内实时通信代码
2019/12/22 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
教师党员批评与自我批评
2014/10/15 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
利用Python实现Picgo图床工具
2021/11/23 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫