canvas绘制七巧板

首先推荐的课程学习是《炫丽的倒计时效果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博客

分享，让生活更美好！

canvas绘制七巧板相关推荐

HTML绘制七巧板,canvas绘制七巧板
> 脚本语言 > > canvas绘制七巧板 2017-04-19 14:10 出处:清屏网人气: 在上一节中,我们了解了如何使用canvas绘制线段,这一节,我们使用canvas ...
java实现七巧板问题_[Java教程]canvas,绘制七巧板
[Java教程]canvas,绘制七巧板 0 2016-11-03 13:00:04 //定义一个数组变量,分别代表七巧板的七块 //每一部分是一个类的对象,每一部分包含一个p, //p也是一个数组, ...
canvas 绘制七巧板
如图, 给出七巧板的各点坐标, 接下来, 通过canvas来绘制这样一个七巧板图形 let pos = [ // 获取各个图形的各点坐标, 以及图形颜色{angle: [{x:0,y:0}, {x:2 ...
python七巧板代码_canvas绘制七巧板
在上一节中,我们了解了如何使用canvas绘制线段,这一节,我们使用canvas绘制七巧板. html代码如下所示,和第一节中代码一致: Canvas绘制七巧板 #canvas{ border: 1p ...
python绘制七巧板_CSS3制作七巧板动画
欢迎访问我的博客GISer空间. 1. CSS3:每块板作为为一个dom元素. 1.1 用一个容器和七个元素来表示七块板. 1.2 通过CSS3的transform的平移.缩放.旋转.变形多种操作来确 ...
Html5画布绘制七巧板
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...

canvas绘制七巧板

canvas绘制七巧板相关推荐

最新文章

热门文章