<!DOCTYPE HTML>
<html>
<title>Canvas直线</title>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:#06F 2px solid;">
您的浏览器不支持 Canvas
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d"); cxt.beginPath();
cxt.moveTo(50,50); cxt.lineTo(150,150);
cxt.moveTo(150,50); cxt.lineTo(50,150);
cxt.moveTo(100,50); cxt.lineTo(100,150);
cxt.moveTo(50,100); cxt.lineTo(150,100);
cxt.stroke();
</script>
</body>
</html>
显示效果如下：
【第一篇绘制直线的小小进阶，画法完全一样。只不过是增加了几条线。组合成了一个米字。Canvas 绘制图像是通过JavaScript完成的。要点在于坐标。Canvas的坐标是从左上角开始的，X轴沿水平方向，按像素，向右延伸，Y轴沿垂直方向，向下延伸。左上角坐标为x=0，y=0的点称作原点。】