HTML5 Canvas 起步(1) - 基本概念

2013-05-16 14:38:05 作者:安惠通 来源:互联网-安惠通

什么是Canvas

<canvas> 是一个新的 HTML 元素,这个元素在 这里找到一些有趣的 Canvas 示例。

开始使用 Canvas

使用 Canvas 很简单,与使用其他 HTML 元素一样,只需要在页面中添加一个 <canvas> 标签即可:


复制代码
代码如下:

<canvas id="screen" width="400" height="400"></canvas>

当然,这样只是简单的创建了一个 Canvas 对象而已,并没有对它进行任何操作,这个时候的 canvas 元素看上去与 div 元素是没什么区别的,在页面上什么都看不出来:)
另外,canvas 元素的大小可以通过 width 与 height 属性来指定,这与 img 元素有点相似。
Canvas 的核心:Context
前面说到可以通过 JavaScript 来操作 Canvas 对象来进行绘制图形、合成图像等操作,这些操作并不是通过 Canvas 对象本身来进行的,而是通过 Canvas 对象的一个方法 getContext 获取 Canvas 操作上下文来进行。也就是说,在后面我们使用 Canvas 对象的过程中,都是与 Canvas 对象的 Context 打交道,而 Canvas 对象本身可以用来获取 Canvas 对象的大小等信息。
要获取 Canvas 对象的 Context 很简单,直接调用 canvas 元素的 getContext 方法即可,在调用的时候需要传递一个 Context 类型参数,目前可以用的并且是唯一可以用的类型值就是 2d:



提示:您可以先修改部分代码再运行

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素,但是并没有完全按照规范来实现,规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替,因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目,它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方:



提示:您可以先修改部分代码再运行

注意:到 Opera 9.5 为止,Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后,开始来写我们的第一个 Canvas 程序,闻名的 HelloWorld 的又一个分支“Hello, Canvas”:



提示:您可以先修改部分代码再运行

运行示例,Canvas 对象所在区域显示出“Hello, World!”,这正是代码中 ctx.fillText("Hello, World!", 20, 20); 的作用。

fillText 以及相关属性

fillText 方法用来在 Canvas 中显示文字,它可以接受四个参数,其中最后一个是可选的:

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示显示文字时最大的宽度,可以防止文字溢出,不过我在测试中发现在 Firefox 与 Chomre 中指定了 maxWidth 时也没有任何效果。

在使用 fillText 方法之前,可以通过设置 Context 的 font 属性来调整显示文字的字体,在上面的示例中我使用了“20pt Arial”来作为显示文字的字体HTML5的Canvas,脚本语言的新舞台, hred

2. canvas support in Opera, Opera


html5 canvas 简单画板实现代码基于HTML5 audio元素播放声音jQuery小插件HTML5 常用语法一览(列举不支持的属性)网易微博Web App用HTML5开发的过程介绍HTML5 Canvas 起步(1) - 基本概念HTML5是否真的可以取代FlashHTML5的革新 结构之美HTML5 Canvas 起步(2) - 路径HTML5 标准将把互联网视频扔回到黑暗时代HTML5 对各个标签的定义与规定:body的介绍html5 兼容IE6结构的实现代码

网站知识 网站推广 帮助中心 代理专区 会员中心 关于我们
Copyright © 2018 WEBHAT All Right Reserved. 蜀ICP备08111331号 建站咨询热线:028-64460679 15184346008