使用canvas定义线的开头和结尾的形状

xvzhengyang

于 2021-03-16 23:07:54 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

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

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

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

JavaScript

29 篇文章

订阅专栏

web前端下的canvas

5 篇文章

订阅专栏

本文详细讲解如何利用HTML5 Canvas API定制线条的起始和结束样式，通过JavaScript和CSS实现图形渲染的创新效果，提升用户体验。

摘要生成于 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.lineWidth = 50;
			context.strokeStyle = "#005588";
			
			context.beginPath();
			context.moveTo(100, 200);
			context.lineTo(700, 200);
			context.lineCap = "butt";
			context.stroke();

			context.beginPath();
			context.moveTo(100, 400);
			context.lineTo(700, 400);
			context.lineCap = "round";
			context.stroke();

			context.beginPath();
			context.moveTo(100, 600);
			context.lineTo(700, 600);
			context.lineCap = "square";
			context.stroke();
		</script>
	</body>
</html>