HTML5中canvas的使用介绍

今天要说下 HTML5特有的一个元素 canvas ，旨在让web页面上作矢量图不需要在依靠flash或是其他插件，在网页上使用canvas元素时，它会创建一块矩形区域，默认300*150，当然也是可以自定义的。Canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称为原点。

 

Canvas的功能虽然很强大，但是如果它实现的效果，和当前HTML5已有的元素实现的效果一样，那当然还是直接使用已有的元素，执行效率上是会快一些的，如果canvas元素不被某些浏览器支持，那canvas就必须要要做好兼容性考虑，在canvas内定义一段替代内容，替代内容可以是一段说明文字或是一张图片。Canvas的一般样式，如边框，边距，都可以使用css语法来定义，其内部添加的文字，样式默认同canvas元素一样。

下面说说canvas API的使用，先从一个例子说起吧，在canvas中绘制一条对角线：先在html中放入一个canvas元素  然后在javascript脚本中开始作线，

function drawDiagonal(){

        //取得canvas元素及其绘图上下文

        var canvas = document.getElementByIdx_x("diagonal");

        var context = canvas.getContext('2d');       

       

        //用绝对坐标来创建一条路径

        context.beginPath();

        context.moveTo(10,140);

        context.lineTo(140,70);

       

        //将这条线绘制到canvas上

        context.stroke();

       

}

window.addEventListener("load",drawDiagonal,true);

 

效果如下：

 

虽然比较简单，但是展示了使用HTML5 canvas API的重要流程。首先通过ID 获得canvas访问权，接着定义一个context变量，调用canvas对象的getContext方法，并传入希望使用的canvas类型。代码中调用了三个方法--beginPath、moveTo和lineTo，传入了这条线的起点和终点的坐标。

Canvas的强大功能远不止这些，当然限于篇幅，这里说不了很多，推荐大家一本书写的很详细，适合新手细细品读。

作者 wungking  首发站：  转载请注明出处