HTML5绘图基础_07_绘制第二个图形

      2020-08-02 09:47      HTML5

如何在画布上连续绘制两个图形呢?

我们需要在每次的图形前后添加beginPath和closePath方法即可。并且每次绘制需要调用stroke方法。

代码如下:

context.beginPath();context.moveTo(100,100);context.lineTo(100,400);context.lineTo(400,400);context.lineTo(100,100);context.closePath();context.strokeStyle = "red";context.lineWidth = 5;context.stroke();context.beginPath();context.moveTo(100,100);//重新移动context.lineTo(400,100);context.lineTo(600,300);context.lineTo(100,100);context.closePath();context.strokeStyle = "blue";context.lineWidth = 2;context.stroke(); 效果: