本文共 930 字,大约阅读时间需要 3 分钟。
五、在页面中加入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的重要流程。
方法moveTo和lineTo实际上并不画线,而是在结束canvas操作的时候,通过调用context.stroke()方法完成线条的绘制。绘制结果如下:
本教程由尚硅谷教育大数据研究院出品,如需转载请注明来源。