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

最新推荐文章于 2024-02-26 11:07:08 发布

一起学习前端吧

最新推荐文章于 2024-02-26 11:07:08 发布

阅读量592

点赞数

分类专栏： HTML5绘图文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/sweetsoft/article/details/50530265

版权

HTML5绘图专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

我们需要在每次的图形前后添加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();

效果：