2020-06-23-Canvas笔记03-线段的绘制

Canvas绘图环境提供了两个可以用来创建线性路径的API：

• moveTo(x,y)
• lineTo(x,y)
• stroke()
  在使用moveTo() 和 lineTo() 确定线段的两个端点后，一定要使用 stroke() 将线画出来，不然页面上是不显示线段的。

画一条直线

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

context.beginPath();
context.moveTo(10, 30);
context.lineTo(450, 30);
context.stroke();

设置线的宽度

设置 lineWidth 属性可以改变线的宽度

context.lineWidth = 10;
context.beginPath();
context.moveTo(10, 50);
context.lineTo(450, 50);
context.stroke();

设置线的颜色

设置 strokeStyle 属性可以改变线的颜色

context.lineWidth = 1;
context.strokeStyle = '#ff0000';
context.beginPath();
context.moveTo(10, 70);
context.lineTo(450, 70);
context.stroke();

绘制虚线

ctx.setLineDash(segments);

参数：segments
接收一个数组，数组的元素是数值，分别定义虚线中线段的长度和空白部分的长度。
例如, [10,5]表示线段长度10，空白长度为5。
如果数组元素个数是奇数个，那么数组会被再复制一份进行合并。例如[5, 15, 25]绘制时会按照[5, 15, 25, 5, 15, 25]。

context.beginPath();
context.setLineDash([10, 5]);
context.moveTo(10, 100);
context.lineTo(450, 100);
context.stroke();

绘制虚线.png

context.beginPath();
context.setLineDash([5, 15, 25]);
context.moveTo(10, 140);
context.lineTo(450, 140);
context.stroke();

segments为奇数.png