1)what‘s canvas
在网页上创建canvas元素时,它会创建一块矩形区域。默认情况下该矩形宽为300像素,高为150像素。
代码一:基本的canvas元素
<canvas></canvas>
使用canvas编程,首先要获得上下文(context),接着在上下文中执行动作,最后将这些动作执行到上下文中。
2)canvas坐标
如上图,canvas坐标是从左上角开始的,X轴沿着水平方向向右延伸,Y轴沿着垂直方向向下延伸。左上角坐标为x=0,y=0的点称作原点。
3)替代内容
访问页面的时候,如果浏览器不支持canvas元素或者不支持HTML5 canvas API中的某些特性,那么开发人员最好写一份替换代码。
代码二:在canvas元素中使用替代内容
<canvas>
Update your browser to enjoy canvas!
</canvas>
4)浏览器对HTML5 canvas的支持
注:IE9以上版本支持
5)检测浏览器的支持情况
代码三:检测浏览器支持情况
try {
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser";
} catch (e) {
document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser";
}