当前位置:我的异常网» HTML5 » Pro HTML5 Programming(Second Edition)2.Canvas AP

Pro HTML5 Programming(Second Edition)2.Canvas API（二）

  网友分享于：2013-12-23  浏览：0次

Pro HTML5 Programming(Second Edition)2.Canvas API（2）

1.在页面中加入canvas元素

　　eg：

Test02

 　　注意：上面的代码中增加了值为“diagonal”的ID特性，这样做可以方便以后通过ID来快速找到canvas元素，对于任何cnavas对象来说，ID特性都是十分重要的，因为对canvas元素的所有操作都是通过脚本代码控制的，没有ID的话，想要找到要操作的canvas元素会很难。

执行效果图如下：

2.在canvas中绘制一条对角线

　　Test02.js

1 function drawDiagonal(){ canvas=document.getElementById("diagonal"); 4 var context=canvas.getContext("2d"); context.beginPath(); 8 context.moveTo(70,140); 9 context.lineTo(140,70); context.stroke(); 13 } 14 15 window.addEventListener("load",drawDiagonal,true);

　　以上代码展示了使用HTML5 Canvas API的重要流程：

　　　　首先通过引用特定的canvas id值来获取对canvas对象的访问权，接着定义一个context变量，调用canvas对象的getContext方法，并且传入希望使用的canvas类型，代码清单中通过传入“2d”俩获取一个二维的上下文。

　　在代码中调用了三个方法：beginPath，moveTo，lineTo，传入了这条线的起点和终点。方法moveTo和lineTo实际上并不是画线，而是在结束canvas操作的时候，通过调用context.stroke（）方法完成线条的绘制。

注意：

　　canvas中所有的操作都是通过上下文对象来完成的，所有涉及到视觉输出效果的功能都只能通过上下文对象而不是画布对象来使用。canvas中的很多设置样式和外观的函数不会直接修改显示结果。只有当对路径应用绘制（stroke）或是填充（fill）方法时，结果才会显示出来，否则，只有在显示图像，显示文本或是绘制，填充和清除矩形框的时候，canvas才会马上更新。