[HTML5资料]Canvas教程

HTML5 资料

1 Canvas 教程

是一个新的用于通过脚本（通常是 ）绘图的  元素。例如，他可以用于绘图、

制作图片的组合或者简单的动画（当然并不那么简单）。

 !"!# $

1.1 基本用法

%

元素

!$它只有两个属性，和 ，两个都是可选的，并且都可以 12或者 3来设置。

4/5!! !!'6,,7!*+,

7!$如果不指定 和 ，默认的是宽 6,, 像素，高 *+, 像素。!

8!''3!5!'8$"'

'''/7!!'/

3$#虽然可以通过 3来调整  的大小，但渲染图像会缩放来适应布局的（如果你发

现渲染结果看上去变形了，不必一味依赖 3，可以尝试显式指定  的 和 属性

值）。

/&5!!/

!"!#'!"!!#$&!'!'

可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对  实际生

成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式， 默认是全透明的。

替用内容

%! !!! !'&!"

:7*$,;7!#!!&

!$

因为 相对较新，有些浏览器并没实现，如 :7*$,和 ;7!，所以我们需要

为那些不支持  的浏览器提供替用显示内容。

!''<=9! !$

%&!!!!!'!!

()>)()*+,)()*+,)

=?6$*+@,$*+

-

()!)()*+,)()*+,)

()-!$)()*+,)()*+,)-

-

结束标签 -是必须的

A!! !!'B

$!'

!!$8!!&! C"-#$

单地忽略结束标签。

!!3!'!!

"!9#!3!;"!

!!#$

如果有替用内容，那么可以用一些 3技巧来为并且仅为 隐藏替用内容，因为那些替用内容

是需要在 ;里显示但不需要在 里显示。

渲染上下文（D37）

57877

!$4&!!E17

!'!'57$7'.'

7 $37"#'7$

初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（7），它

可以通过 元素对象的 37方法来获取，同时得到的还有一些画图用的函数。

37"#接受一个用于描述其类型的值作为参数。

($;!%'"&!&#B

7($37"&E&#B

5!12;!%'$4

737$

上面第一行通过 ;!%'方法取得 对象的 12节点。然后通过其 37方法取

得其画图操作上下文。

($;!%'"&!&#B

"$37#F

7($37"&E&#B

--

G!F

--0

G

代码模板

! !&!! !7!$H

!5!''$

 "#F

($;!%'"&!&#B

"$37#F

7($37"&E&#B

G

-

'!'()7-)

F=*7!!BG

-'!

-

!'! 9!!5$

细心的你会发现我准备了一个名为 的函数，它会在页面装载完毕之后执行一次（通过设置

'标签的 !属性），它当然也可以在 ，!，或者其他事件处理函数中被

调用。

一个简单的例子

.&!7! !!

'$4&!!7!!!7!$

作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有 ! 透明效果。我们会在后

面的示例中详细的让你了解它是如何运作的。

观看示例