Canvas 绘制“米”字

<!DOCTYPE HTML>

<html>

<title>Canvas直线</title>

<body>

您的浏览器不支持 Canvas

</canvas>

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的点称作原点。】