java边学边玩_HTML5边玩边学(1):画布

一、标签

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

标签的用法非常简单,如下:

你的浏览器不支持 Canvas 标签

标签和普通的 HTML 标签没有多大的区别,你可以设置它的宽度和高度,可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里 找到关于 标签的更多内容。

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

上面的 代码显示效果如下:

你的浏览器不支持 Canvas 标签

如果你用的是IE浏览器,可能只能看到一个提示;如果你用的是谷歌浏览器或者火狐浏览器,你就可以看到一个红色的方块区域。

二、渲染上下文 Rendering Context

其实光有 标签我们并不能作任何事情,玩过 Windows 编程的同学都知道,在 Windows 里面绘图先要得到一个设备上下文 DC ,在 标签上绘图也需要先得到一个渲染上下文,我们的图形并不是直接画到屏幕上的,而是先画到上下文(Context)上,然后再刷新到屏幕上面的。

题外话: 为什么要整出一个“上下文”这么复杂的概念呢?因为有了上下文对象,我们就可以让各种不同的图形设备在我们眼里面看起都是一个样,我们只需要专注于绘图,其他的工作就让操作系统和浏览器去操心吧,说白了就是把各式各样的具体变成统一的抽象,从而减轻我们的负担。

获取上下文非常简单,只需要如下两行代码:

varcanvas=document.getElementById('tutorial');varctx=canvas.getContext('2d');

首先获取 canvas 对象,然后调用 canvas 对象的 getContext 方法,这个方法目前只能传入参数 "2d",不久的将来他可能会支持参数 "3d",你一定明白那意味着什么,让我们期待吧。

getContext 方法返回一个 CanvasRenderingContext2D 对象 ,即渲染上下文对象,你可以在 这里 找到关于它的更多内容,都是一些绘图方法。

三、浏览器支持

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

varcanvas=document.getElementById('tutorial');if(canvas.getContext){

alert("支持  标签");

}else{

alert("不支持  标签");

}

四、一个小例子

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

你的浏览器不支持 标签,请使用 Chrome 浏览器 或者 FireFox 浏览器

版权声明:本文为原创文章,作者保留所有权利!欢迎转载,转载请注明作者左洸和出处

//==========================================

posted on 2010-09-17 23:45 左洸 阅读(2807) 评论(2)  编辑  收藏 所属分类: HTML5

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值