今天要说下 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的强大功能远不止这些,当然限于篇幅,这里说不了很多,推荐大家一本书《HTML5高级程序设计》写的很详细,适合新手细细品读。
作者 wungking 首发站:http://www.webgamei.com/club/thread-93916-1-1.html 转载请注明出处