要使用画布这个功能时要创建一个画布,如下代码:
<!--这是创建画布canvas-->
<!--宽和高不要带px,否则会报错-->
<canvas id="huahua1" width="500" height="500"></canvas>
画布没有自动绘画功能,要它画出画来,要通过JavaScript如下代码:
<script type="text/javascript">
var a=document.getElementById("huahua1");
var dx=a.getContext("2d");
dx.moveTo(50,50);
dx.lineTo(250,190);
dx.lineTo(250,50);
dx.lineTo(50,50);
dx.lineTo(50,190);
dx.lineTo(250,190);
dx.stroke();
</script>
上面的moveTo是开始画画的坐标位置,lineTo结束画画的坐标位置。
你可能想问第二个lineTo的开始位置在哪里?
第二个开始的位置是相对,它前面的lineTo是它的开始位置。
打个比方说:
有三个球员,在传球1号传给2号,2号传给3号。那么3号的球的开始位置是2号给的。
那么第二个lineTo的前面一个的结束位置就是下一个lineTo的开始位置。
效果如下: