纯js绘制七巧板（纯js绘制七巧板）
前几天小编有事,所以头条一直没有更, 所以今天补下，今天小编就来说说关于纯js绘制七巧板?下面更多详细答案一起来看看吧!
纯js绘制七巧板
前几天小编有事,所以头条一直没有更, 所以今天补下
这次用的是h5里面的画布就是canvas进行的绘制,这个也是考验的js能力
话不多说了 下面开始介绍几个需要用到的知识
首先是关于坐标的只是
关于坐标点的
从0,0,开始如果是向左 那么x轴改变坐标大小,y轴则保持不变
从0,0开始如果是向下,那么y轴改变左边哦大小,x轴保持不变
下面是几个方法
xx.moveTo(x,y)//线条开始
xx.lineTo(x,y)//线条结束
xx.beginPath//变成单独的一个区域开始
xx.closePath//结束如果设置了等于结束这个画布
xx.lineWidth//线条的宽度
xx.stroKeStyle//线条的颜色
xx.fillStyle//背景色
xx.stroke//绘制线条
xx.fill//绘制背景色
以上这些方法是基本的绘制方法
首先看下html布局
<div class="aa">
<canvas id="canvas"></canvas>
</div>
css样式
<style>
.aa{margin: 0 auto;width: 960px;}
</style>
最后看下js的代码
可能有的同学想到了 不就7个图形吗,来上7个区域,用鼠标事件挨个获取坐标,然后画出7个图形
这样是可以,但是太笨了。
所以首先 我们可以把这些都放到一个数组里面到时候遍历就翻遍很多了
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:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
获取下id 定义画布的大小
var ConText=canvas.getContext('2d');
for(var i=0;i<tangram.length;i ){
draw(tangram[i],ConText);
}
循环整个数组,都存到方法里
function draw(pie,cont){
cont.beginPath();
cont.moveTo(pie.p[0].x,pie.p[0].y);
for(var i=0;i<pie.p.length;i ){
cont.lineTo(pie.p[i].x,pie.p[i].y);
}
draw方法有两个参数分别对应上面for循环里面的,循环里面的第i个
cont.closePath();
cont.fillStyle= pie.color;
cont.fill();
cont.lineWidth=3;
cont.strokeStyle='black';
cont.stroke();
上面的都懂什么意思了 就不说了
看下完成后的图
七巧板
下面是完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.aa{margin: 0 auto;width: 960px;}
</style>
</head>
<body>
<div>
<canvas id="canvas"></canvas>
</div>
<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:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'#a594c0'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'#fa8ecc'},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'#f6ca29'}
]
window.onload= function () {
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var ConText=canvas.getContext('2d');
for(var i=0;i<tangram.length;i ){
draw(tangram[i],ConText);
}
function draw(pie,cont){
cont.beginPath();
cont.moveTo(pie.p[0].x,pie.p[0].y);
for(var i=0;i<pie.p.length;i ){
cont.lineTo(pie.p[i].x,pie.p[i].y);
}
cont.closePath();
cont.fillStyle= pie.color;
cont.fill();
cont.lineWidth=3;
cont.strokeStyle='black';
cont.stroke();
}
}
</script>
</body>
</html>
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
