H5 Canvas简介

H5 Canvas简介

Canvas元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在HTML中嵌入了一张画布，这样就可以在HTML上进行图形操作。Canvas元素本身没有绘图能力，它需要借助JavaScript来实现绘图功能。

Canvas标签的历史

Canvas这个HTML元素是为客户端矢量图形而设计的。它自身没有行为，只是把一个绘图API展现给了客户端JavaScript，以使脚本能够绘制东西到画布上。
<canvas>标记由Apple在Safari 1.3 Web浏览器中引入。对HTML进行这一扩展的原因在于，希望HTML在Safari中的绘图能力也能为Mac OS X 桌面的Dashboard组件所使用，并且Apple希望有一种方式在Dashboard中支持脚本化图形。
Firefox 1.5和Opera 9都跟随了Safari的引领，这两个浏览器都支持<canvas>标记。
可以在IE中使用<canvas>标记，并在IE的VML支持基础上用开源的JavaScript代码(由Google发起)来构建具有兼容性的画布。

Canvas的定义和用法

使用Canvas标签，只需要向HTML5里添加Canvas元素即可，代码如下:

<canvas id="myCanvas" width="270" height="120"></canvas>

如何使用Canvas来绘图

Canvas本身是没有绘图能力的，需要借助JavaScript来实现。所有的绘制工作全部必须在JavaScript中完成。
下面是绘制一个矩形的示例代码：

onload = function() {
    draw();
};
function draw() {
    /* 查找id是myCanvas的元素 */
    var canvas = document.getElementById('myCanvas');
    /* 验证Canvas元素是否存在，以及浏览器是否支持Canvas元素 */
    if (!canvas || !canvas.getContext) return false;
    /* 创建2D context对象 */
    var ctx = canvas.getContext('2d');
    /* 画一个红色矩形 */
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0, 0, 100, 120);
};

效果如下所示:

Canvas的限制

使用Canvas可拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。但是绘制的图形是静止的，如果要让图形动起来，则需要一帧一帧的绘制。
虽然Canvas可以对图像进行一系列操作，但是效率和普及性都存在一定的问题，对于一些相对复杂的图形和动画等，目前还是Flash更胜一筹。
另外，Canvas是HTML5的新属性，在使用时需要考虑用户浏览器和使用环境。
Canvas目前只是一张二维画布，如果想实现三维效果，需要借助第三方库，如three.js或者Papervision3D等。