HTML5绘图基础_02_绘制线条

在canvas画布中，首先我们需要了解的是画布的坐标系，画布的左上角为坐标系的原点（0,0），右为X轴，下为Y轴。

下述代码：

context.moveTo(100,100);
context.lineWidth = 5;
context.strokeStyle = "#ff0000";
context.lineTo(100,400);
context.stroke();

moveTo将画笔移动到位置（100,100），lineWidth定义了画笔的宽度，strokeStyle定义了画笔的颜色。lineTo表示要绘制到位置（100,400），stroke()函数调用时，才开始绘制线条。

执行结果如下图：