用Canvas绘制线段（2）

用Canvas绘制线段（2）

方法介绍

• ctx.moveTo(x,y)

用于移动画笔到(x,y)坐标处，并以此为路径起点进行绘图

• ctx.lineTo(x,y)

指定路径的下一个点的坐标，表示使用直线连接该点与上一个点

• ctx.stroke()

绘制路径

• ctx.lineWidth=20;

设置线段宽度，默认值为1px，较宽的线条在路径上居中，路径上下两边各有线宽的一半

• ctx.strokeStyle=’red’

strokeStyle主要用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一CanvasGradient对象或者CanvasPattern对象

下面通过绘制一条线段来体验上述几个方法属性

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.lineWidth = 20;
ctx.strokeStyle = 'orange';
ctx.stroke();

如果不进行‘ctx.stroke()’操作，那么线段不会被绘制出来，因为‘ctx.moveTo(10, 10);与ctx.lineTo(100, 100);’仅仅确定了你想要绘制的线段的路径，而并不是实际去画，路径确定后需要通过stroke()将路径描出来

ctx.closePath()

用于闭合当前路径。即将当前路径的起点与终点连起来形成一个闭合区域

ctx.moveTo(10, 10);
ctx.lineTo(100, 10)