使用canvas绘制直线(canvas的基本使用)

最新推荐文章于 2025-04-09 15:48:38 发布

xvzhengyang

最新推荐文章于 2025-04-09 15:48:38 发布

阅读量628

点赞数

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

本文链接：https://blog.csdn.net/xvzhengyang/article/details/114905880

版权

JavaScript 同时被 2 个专栏收录

29 篇文章

订阅专栏

web前端下的canvas

5 篇文章

订阅专栏

本文将介绍如何使用HTML5的canvas元素进行基本的直线绘制。通过设置坐标和描边样式，我们可以创建出各种线条。无论是初学者还是进阶开发者，理解canvas的基本用法对于网页图形交互设计至关重要。

摘要生成于 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, 500);
			// moveTo()方法表示一次绘制的起点坐标，lineTo()表示基于上一个坐标点到这个坐标点之间的直线连接。
			context.lineWidth = 8; //线条的宽度
			context.strokeStyle = "#333"; //线条的颜色
			context.stroke(); //绘制
		</script>
	</body>
</html>

运行效果