Canvas入门（一）

五、在页面中加入canvas元素

在页面中插入canvas元素非常直观，如下：

<canvas height="200" width="200"></canvas>

以上代码会在页面中创建一个200 X 200像素的区域。但是注意该区域是不可见的。如果要为其添加一个边框，可以通过设置一些CSS样式完成。

<canvas id="square" style="border: 1px solid;" height="200" width="200"> </canvas>

上边的代码我们为canvas指定了一个square属性，主要是方便我们可以使用dom方便的获取到canvas的对象，id属性时非常重要的，因为我们对canvas的一切操作都是通过JS来控制的，如果没有id获取canvas元素会非常复杂。

上边的代码会在页面的效果如下：

虽然仅仅是一个空白的方块，但是艺术家可以在一张白纸上画出美丽的图画。现在我们就尝试在这张白纸上画一条对角线吧。

//获取canvas对象 var canvas = document.getElementById("square"); //获取context对象 var context = canvas.getContext("2d"); //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70,140); context.lineTo(140,70);        //将这条线绘制在canvas上 context.stroke();

这段JS代码虽然简单，但是却展示出来使用Canvas API的重要流程。

1. 通过id获取canvas对象
2. 调用canvas对象的getContext()方法，并传入希望使用canvas的类型。这里我传入了“2d”来获取一个二维上下文。
3. 调用三个方法，beginPath、moveTo、lineTo。传入了这条线的起点终点和坐标。

方法moveTo和lineTo实际上并不画线，而是在结束canvas操作的时候，通过调用context.stroke()方法完成线条的绘制。绘制结果如下：

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。