HTML5 Canvas: Canvas对象

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “The HTML5 Canvas Object”.

对于Canvas对象,我们可以通过在HTML页面的<body>中添加<canvas>标签来创建,也可以通过编写JavaScript代码来动态生成:

var theCanvas = document.createElement("canvas");  

Canvas对象有两个可供JavaScript代码访问的属性:width和height — 当前HTML页面上Canvas的宽度和高度。值得注意的是,这两个属性并不是只读的:可以通过更新这两个属性值来改变HTML页面上的Canvas。也就是说,我们可以在不刷新页面的情况下,动态改变Canvas的大小。

除了改变Canvas的大小,我们还可以使用CSS样式来对Canvas进行伸缩。与单纯的改变Canvas大小不同,伸缩操作会根据新的width值和height值来对Canvas中的图像元素进行拉伸和缩小。比如,将某个Canvas伸缩为400×400的图像,我们可以这么做:

style="width:400px; height:400px"  

Canvas对象还有两个非常有用的方法。第一个叫做getContext(),调用该方法可以获取Canvas的二维上下文。第二个方法叫做toDataURL(),调用该方法可以得到当前Canvas渲染图像的地址 — 就像给Canvas做了一个快照。根据传入的MIME类型参数的不同,我们可以得到不同格式的图像。默认格式为image/png,但诸如image/jpeg等其它格式也是支持的。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!