canvas,绘制七巧板

七巧板绘制教程

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_30762087

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/niuniudashijie/p/6026008.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</canvas>

</body>

//定义一个数组变量，分别代表七巧板的七块

//每一部分是一个类的对象，每一部分包含一个p，

//p也是一个数组，分别代表七巧板的每一块的顶点坐标

//color属性代表每一块的颜色

var tangram = [{

p: [{

x: 0,

y: 0

}, {

x: 800,

y: 0

}, {

x: 400,

y: 400

}],

color : "red"

}, {

p: [{

x: 0,

y: 0

}, {

x: 400,

y: 400

}, {

x: 0,

y: 800

}],

color : "blue"

}, {

p: [{

x: 800,

y: 0

}, {

x: 800,

y: 400

}, {

x: 600,

y: 600

}, {

x: 600,

y: 200

}],

color : "yellow"

}, {

p: [{

x: 600,

y: 200

}, {

x: 600,

y: 600

}, {

x: 400,

y: 400

}],

color : "pink"

}, {

p: [{

x: 400,

y: 400

}, {

x: 600,

y: 600

}, {

x: 400,

y: 800

}, {

x: 200,

y: 600

}],

color : "gray"

}, {

p: [{

x: 200,

y: 600

}, {

x: 400,

y: 800

}, {

x: 0,

y: 800

}],

color : "green"

}, {

p: [{

x: 800,

y: 400

}, {

x: 800,

y: 800

}, {

x: 400,

y: 800

}],

color : "orange"

}]

window.onload = function() {

//获取Canvas

var canvas = document.getElementById("canvas");

//定义宽高

canvas.width = 800;

canvas.height = 800;

//获取context

var context = canvas.getContext("2d");

//遍历七巧板数组

for(var i = 0; i < tangram.length; i++)

//每次遍历调用函数draw()

draw(tangram[i], context);

//draw()函数传入两个参数，第一个是七巧板中的一块，

//第二个是我们获得的绘图的上下文环境context

}

function draw(piece, cxt) {

cxt.beginPath();

//用moveTo移动到顶点坐标的第一个坐标的位置

cxt.moveTo(piece.p[0].x, piece.p[0].y);

//使用循环顺次绘制路径

for(var i = 1; i < piece.p.length; i++)

cxt.lineTo(piece.p[i].x, piece.p[i].y);

cxt.closePath();

//定义颜色，调用piece.color

cxt.fillStyle = piece.color;

cxt.fill();

//给七巧板的每一块加一个外边框

cxt.strokeStyle="black";

cxt.lineWidth=3;

cxt.stroke();

}

</script>

</html>

转载于:https://www.cnblogs.com/niuniudashijie/p/6026008.html