是
HTML5
新增的,一个可以使用脚本(通常为 JavaScript
) 在其中绘制图像的 HTML
元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
它最初由苹果内部使用自己 MacOS X WebKit
推出,供应用程序使用像仪表盘的构件和 Safari
浏览器使用。后来,有人通过 Gecko
内核的浏览器 (尤其是 Mozilla
和Firefox
),Opera
和 Chrome
和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。
Canvas
是由 HTML
代码配合高度和宽度属性而定义出的可绘制区域。JavaScript
代码可以访问该区域,类似于其他通用的二维 API
,通过一套完整的绘图函数来动态生成图形。
Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 , Internet Explorer 从 IE9 开始
。Chrome 和 Opera 9+ 也支持
。
元素 看起来和
标签一样,只是 只有两个可选的属性
width、heigth
属性,而没有 src、alt
属性。
如果不给 设置
widht、height
属性时,则默认 width
为300、height
为 150,单位都是 px
。也可以使用 css
属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用 css
属性来设置 的宽高。
替换内容
由于某些较老的浏览器(尤其是 IE9 之前的 IE 浏览器)或者浏览器不支持 HTML 元素 ,在这些浏览器上你应该总是能展示替代内容。
支持 的浏览器会只渲染
标签,而忽略其中的替代内容。不支持
的浏览器则 会直接渲染替代内容。
用文本替换:
用
替换:
结束标签 不可省略。
与
元素不同, 元素需要结束标签(
)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。
会创建一个固定大小的画布,会公开一个或多个渲染上下文(画笔),使用渲染上下文来绘制和处理要展示的内容。
我们重点研究 2D 渲染上下文。 其他的上下文我们暂不研究,比如, WebGL 使用了基于 OpenGL ES的3D 上下文 ("experimental-webgl") 。
var canvas = document.getElementById('tutorial');
//获得 2d 上下文对象
var ctx = canvas.getContext('2d');
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
Canvas tutorial