H5 Canvas简介

  • A+
所属分类:H5 laya

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等。

百分购

发表评论

您必须才能发表评论!