html5 使用canvas画线

上海驾校       

  首先先看一下全部得代码：

<script>
function drawDiagonal() {
// 取得 canvas 元素及其绘图上下文
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
// 将这条线绘制到 canvas 上
context.stroke();
window.addEventListener("load", drawDiagonal, true);
</script>


     接下来对上述代码进行解释

          首先通过引用特定的 canvas ID 值来获取对 canvas 对象的访问权。这段代码中 ID 就是diagonal。接着定义一个 context 变量,调用 canvas 对象的 getContext 方法,并传入

希望使用的 canvas 类型。代码清单中通过传入“ 2d” 来获取一个二维上下文,这也是到目前为止唯一可用的上下文。

         提示 规范未来的某个版本中可能会增加对三维上下文的支持。

         接下来,基于这个上下文执行画线的操作。在代码清单中,调用了三个方法——beginPath、moveTo 和 lineTo,传入了这条线的起点和终点的坐标。方法 moveTo 和 lineTo 实

际上并不画线,而是在结束 canvas 操作的时候,通过调用context.stroke()方法完成线条的绘制。图 2-3 显示了绘制结果。

图 2-3 canvas 中的对角线

绘制一条线段已经是非常大的进步了。从现在开始,就把那些怪异的做法永远忘掉吧。