使用canvas绘制连续折线

xvzhengyang

于 2021-03-16 23:02:31 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript web前端下的canvas 文章标签： css javascript

本文链接：https://blog.youkuaiyun.com/xvzhengyang/article/details/114906013

JavaScript 同时被 2 个专栏收录

29 篇文章

订阅专栏

web前端下的canvas

5 篇文章

订阅专栏

本文详细讲解如何使用HTML5的canvas元素，结合JavaScript技术，实现动态且连续的折线绘制效果。通过设置路径、动画循环以及颜色变化等技巧，创建出引人注目的视觉展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绘制连续折线</title>
	</head>
	<body>
		<div>
			<canvas id="canvas" width="" height=""></canvas>
		</div>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas"); //获取到canvas元素
			//设置宽高
			canvas.width = 800;
			canvas.height = 800;
			var context = canvas.getContext("2d"); //获取上下文的环境
			context.moveTo(100, 100);
			context.lineTo(500, 100);
			context.lineTo(500, 500);
			context.lineTo(100, 500);
		    context.closePath();
			// moveTo()方法表示一次绘制的起点坐标，lineTo()表示基于上一个坐标点到这个坐标点之间的直线连接。
			context.lineWidth = 8; //线条的宽度
			context.strokeStyle = "#333"; //线条的颜色
			context.stroke(); //绘制
		</script>
	</body>
</html>