canvas绘制七巧板

最新推荐文章于 2021-07-27 11:51:54 发布

花开鸟儿来

最新推荐文章于 2021-07-27 11:51:54 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/huoer_12/article/details/39253653

版权

web design 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先推荐的课程学习是《炫丽的倒计时效果Canvas绘图与动画基础》，感谢liuyubobobo的讲解。

偶然之间发现了这门canvas的课程，本来一直都在寻找Canvas教程，学习课程之后，感觉受益良多，于是决定，自己动手将课程中的案例写一遍，俗话说，眼看千遍，不如手写一边。所以，今天就对刚开始的小案例《七巧板的绘制》开始。

先来看看效果截图：

七巧板截图

实现步骤：

1.在html页面上添加canvas标签

<canvas id="tangramCanvas"></canvas>

2.在javascript中定义七巧板中每个版块的信息，如顶点坐标、颜色值等等，我们假设画布的大小为500*500，通过上面的七巧板图可以计算出各版块顶点坐标值，在canvas中，左上角为坐标的原点，垂直向下为Y轴正方向，水平向右为X轴正方向，根据这些可以得出七巧板的信息如下：

//七巧板中各个块的顶点坐标
	var tangram = [
		{angle: [{x:0,y:0},{x:250,y:0},{x:0,y:250}],color: '#CD20A6'},
		{angle: [{x:250,y:0},{x:500,y:0},{x:125,y:375}],color: '#265DD2'},
		{angle: [{x:125,y:125},{x:250,y:0},{x:375,y:125},{x:250,y:250}],color: 'red'},
		{angle: [{x:125,y:125},{x:250,y:250},{x:125,y:375}],color: '#A044AF'},
		{angle: [{x:0,y:250},{x:125,y:125},{x:125,y:375},{x:0,y:500}],color: '#3AD40D'},
		{angle: [{x:0,y:500},{x:250,y:250},{x:500,y:500}],color: '#D83F44'},
		{angle: [{x:250,y:250},{x:500,y:0},{x:500,y:500}],color: '#A337F3'}
	];

其中，angle代表的是顶点坐标数组，是按照顺序依次排列，顺势针或是逆时针都无关紧要，只要是连续即可，color指的是该板块的颜色值。

坐标计算

3.在页面加载完成后，获取canvas，得到画布的上下文，绘制图像

//当加载完成后，执行绘制动作
	window.onload = function(){
		var canvas = document.getElementById("tangramCanvas");
		//设置画布大小
		canvas.width = 500;
		canvas.height = 500;
		//设置画布的样式
		canvas.style.cssText = "margin: 0 auto;border: 1px solid black;width: 500px;height: 500px;display:block;";
		var context = canvas.getContext("2d");
		//绘制图像
		drawTangram(tangram,context);
	}
	//绘制函数
	function drawTangram(tangram,ctx){
		//循环遍历每个版块
		for(var i=0,len=tangram.length;i<len;i++){
			//获取版块的顶点坐标集合数组
			var angle = tangram[i].angle;
			//设置填充样式
			ctx.fillStyle = tangram[i].color;
			//开始新的路径
			ctx.beginPath();
			//将画笔移至第一个顶点处
			ctx.moveTo(angle[0].x,angle[0].y);
			//循环画出上个顶点到下个顶点的直线
			for(var p = 1; p< angle.length;p++){
				ctx.lineTo(angle[p].x,angle[p].y);
			}
			//关闭路径
			ctx.closePath();
			//填充颜色
			ctx.fill();
		}
	}

运行之后，就可以得到上面的图形。

到此，七巧板的绘制全部完成，完整的代码节后如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>七巧板效果制作</title>
</head>
<body style="width: 100%;">
<canvas id="tangramCanvas"></canvas>

<script type="text/javascript">
	//七巧板中各个块的顶点坐标
	var tangram = [
		{angle: [{x:0,y:0},{x:250,y:0},{x:0,y:250}],color: '#CD20A6'},
		{angle: [{x:250,y:0},{x:500,y:0},{x:125,y:375}],color: '#265DD2'},
		{angle: [{x:125,y:125},{x:250,y:0},{x:375,y:125},{x:250,y:250}],color: 'red'},
		{angle: [{x:125,y:125},{x:250,y:250},{x:125,y:375}],color: '#A044AF'},
		{angle: [{x:0,y:250},{x:125,y:125},{x:125,y:375},{x:0,y:500}],color: '#3AD40D'},
		{angle: [{x:0,y:500},{x:250,y:250},{x:500,y:500}],color: '#D83F44'},
		{angle: [{x:250,y:250},{x:500,y:0},{x:500,y:500}],color: '#A337F3'}
	];
	//当加载完成后，执行绘制动作
	window.onload = function(){
		var canvas = document.getElementById("tangramCanvas");
		//设置画布大小
		canvas.width = 500;
		canvas.height = 500;
		//设置画布的样式
		canvas.style.cssText = "margin: 0 auto;border: 1px solid black;width: 500px;height: 500px;display:block;";
		var context = canvas.getContext("2d");
		//绘制图像
		drawTangram(tangram,context);
	}
	//绘制函数
	function drawTangram(tangram,ctx){
		//循环遍历每个版块
		for(var i=0,len=tangram.length;i<len;i++){
			//获取版块的顶点坐标集合数组
			var angle = tangram[i].angle;
			//设置填充样式
			ctx.fillStyle = tangram[i].color;
			//开始新的路径
			ctx.beginPath();
			//将画笔移至第一个顶点处
			ctx.moveTo(angle[0].x,angle[0].y);
			//循环画出上个顶点到下个顶点的直线
			for(var p = 1; p< angle.length;p++){
				ctx.lineTo(angle[p].x,angle[p].y);
			}
			//关闭路径
			ctx.closePath();
			//填充颜色
			ctx.fill();
		}
	}
	
</script>
</body>
</html>

谢谢！！！

转载请标明出处，来自CSDN博客

分享，让生活更美好！