Canvas之画七巧板

最新推荐文章于 2023-05-19 13:56:07 发布

TaoLR

最新推荐文章于 2023-05-19 13:56:07 发布

阅读量2.1k

点赞数

分类专栏： js 文章标签： canvas

本文链接：https://blog.csdn.net/lin_credible/article/details/40453141

版权

这篇博客介绍了如何利用Canvas进行状态基绘图，并提供了一段详细的七巧板绘制代码，适合学习Canvas的读者参考。

摘要由CSDN通过智能技术生成

FromCanvas教程 Canvas绘图是基于状态的，看完后，略有了解Canvas！

七巧板代码如下:

<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title></title>
</head>

<body>
	<canvas id="canvas" style="border:1px solid #aaa; display: block;margin: 50px auto;">
		当前浏览器不支持Canvas, 请您更换浏览器后再试.
	</canvas>
	
	<script>

		var tangram = [
			{p:[{x:0, y:0}, {x:800, y:0}, {x:400, y:400}], color:"#caff67"},
			{p:[{x:0, y:0}, {x:400, y:400}, {x:0, y:800}], color:"#67becf"},
			{p:[{x:800, y:0}, {x:800, y:400}, {x:600, y:600}, {x:600, y:200}], color:"#ef3d61"},
			{p:[{x:600, y:200}, {x:600, y:600}, {x:400, y:400}], color:"#f9f51a"},
			{p