Canvas_绘制3条不同颜色和宽度的平行线

最新推荐文章于 2023-05-24 18:09:09 发布

lijianli_131300

最新推荐文章于 2023-05-24 18:09:09 发布

阅读量655

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/lijianli_131300/article/details/107496468

版权

Canvas 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas绘制三条不同颜色和宽度的平行线</title>
</head>
<body>
	<canvas id="canvas" width="600" height="400"></canvas>
	<script>
		var myCanvas=document.getElementById("canvas");
		ctx=myCanvas.getContext("2d");
		ctx.beginPath(); //开启新路径，上边的画图与我无关
		ctx.moveTo(100,100);
		ctx.lineTo(200,100);
		ctx.strokeStyle="blue";
		ctx.lineWidth=10;
		ctx.stroke();

		ctx.beginPath();//开启新路径，上边的画图与我无关
		ctx.moveTo(100,200);
		ctx.lineTo(200,200);
		ctx.strokeStyle="green";
		ctx.lineWidth=20;
		ctx.stroke();

		ctx.beginPath();//开启新路径，上边的画图与我无关
		ctx.moveTo(100,300);
		ctx.lineTo(200,300);
		ctx.strokeStyle="yellow";
		ctx.lineWidth=30;

		ctx.stroke();
	</script>
</body>
</html>

说明：

（1）beginPath()开启新的路径，可以解决样式覆盖问题。

（2）strokeStyle 设置线条颜色。

（3）lineWidth 设置线条的宽度。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lijianli_131300

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas_绘制3条不同颜色和宽度的平行线

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Canvas绘制三条不同颜色和宽度的平行线</title></head><body> <canvas id="canvas" width="600" height="400"></canvas> <script> var .
复制链接

扫一扫