H5初识，应用canvas实现一个简单的七巧板图形_h5实现七巧板拼图程序怎么做-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43339643/article/details/90203427

这篇博客简单记录了使用HTML5的canvas元素绘制七巧板的过程，主要强调了通过预计算各点坐标以及利用beginPath()和closePath()确保图形闭合。博主提醒，canvas的尺寸应在标签内设置而非样式表中。

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

简单的记录一下学习过程

应用html5的canvas绘制了一个十分简单的七巧板图形，没有什么难度，只要将各个点的坐标预先计算好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var canvas=document.getElementById('my-canvas')
				var ctx=canvas.getContext('2d')
				
				//橙色区域 顶点 逆时针
				ctx.beginPath()
				ctx.moveTo(50,50)
				ctx.lineTo(50,650)
				ctx.lineTo(350,350)
				ctx.strokeStyle='#e67817'//橙色区域
				ctx.fillStyle='#e67817'
				ctx.fill()
				ctx.closePath()
				
				//绿色区域,左 逆时针
				ctx.beginPath()
				ctx.moveTo(50,650)
				ctx.lineTo(350,350)
				ctx.lineTo(650,650)
				ctx.strokeStyle='#009140'
				ctx.fillStyle='#009140'
				ctx.fill()
				ctx.closePath()
				
				//黄色区域,底部开始逆时针
				ctx.beginPath()
				ctx.moveTo(350,350)
				ctx.lineTo(500,200)
				ctx.lineTo(350,50)
				ctx.lineTo(200,200)
				ctx.strokeStyle='#fff400'
				ctx.fillStyle='#fff400'
				ctx.fill()
				ctx.closePath()
				
				//粉色区域 左 顺时针
				ctx.beginPath()
				ctx.moveTo(50,50)
				ctx.lineTo(200,200)
				ctx.lineTo(350,50)
				ctx.strokeStyle='#f09ba0'
				ctx.fillStyle='#f09ba0'
				ctx.fill()
				ctx.closePath()
				
				//紫色区域 底 逆时针
				ctx.beginPath()
				ctx.moveTo(650,650)
				ctx.lineTo(650,350)
				ctx.lineTo(500,200)
				ctx.lineTo(500,500)
				ctx.strokeStyle='#6600a1'
				ctx.fillStyle='#6600a1'
				ctx.fill()
				ctx.closePath()
				ctx.stroke();
				
				//蓝色区域 底 逆时针
				ctx.beginPath()
				ctx.moveTo(500,500)
				ctx.lineTo(500,200)
				ctx.lineTo(350,350)
				ctx.strokeStyle='#76c5f0'
				ctx.fillStyle='#76c5f0'
				ctx.fill()
				ctx.closePath()
				
				//红色区域 底 逆时针
				ctx.beginPath()
				ctx.moveTo(650,350)
				ctx.lineTo(650,50)
				ctx.lineTo(350,50)
				ctx.strokeStyle='#d22c2c'
				ctx.fillStyle='#d22c2c'
				ctx.fill()
				ctx.closePath()
			}
		</script>
		<style type="text/css">
			#my-canvas{
				background-color: antiquewhite;
			}
			.contain{
				width: 800px;
				height:800px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="contain">
			<canvas id="my-canvas" width="700" height="700"></canvas>
		</div>
	</body>
</html>

关键之处：

在绘制每一个小图形的时候建议使用beginPath()和closePath()来进行闭合，这样可以保证每一小部分可以单独设置不同的样式，同时，画布canvas的大小不要在样式表中设置，必须是canvas标签内设置

<canvas id="my-canvas" width="700" height="700"></canvas>

效果如下