html画布直线代码,HTML5 Canvas绘制各种线条

本文介绍的所有内容都假定已经获得了Canvas对象，即假定已经在页面中含有下列代码：

var mycanvas = document.getElementById("mycanvas");

var ctx = mycanvas.getContext('2d');

在本节中，将重点使用path()、fill()和stroke()方法及其相关属性。

本文将详细介绍如何用canvas绘制各类线条，即直线、折线、弧线和曲线等，并提供相应的代码作为参考。

1. 直线

直线就是从A点到B点的一条线段。绘制直线的示例代码如下：

ctx.strokeStyle ="FF0000"; //线的颜色为红色

ctx.lineWidth=2; //线宽为2像素

ctx.beginPath(); //开始路径

ctx.moveTo(10, 10); //给路径一个起点

ctx.lineTo(100, 100); //给路径一个终点

ctx.stroke();

ctx.closePath(); //关闭路径

2. 折线

折线就是从A点到B点再到C点的一个线段。绘制折线的示例代码如下：

ctx.strokeStyle ="FF0000"; //线的颜色为红色

ctx.lineWidth=2; //线宽为2像素

ctx.beginPath(); //开始路径

ctx.moveTo(10, 10); //给路径一个起点

ctx.lineTo(400, 400); //给路径一个终点

ctx.moveTo(400, 400); //继承上一个起点