HTML5：canvas API

来源：互联网发布：网络剧错生在线观看编辑：程序博客网时间：2024/05/22 10:25

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";}