canvas,绘制七巧板

Posted 大耳朵兔兔兔

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas,绘制七巧板相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

 

</head>

 

<body>

<canvas id="canvas" style="border: 1px solid black;display: block;margin: 50px auto;">

 

</canvas>

</body>

<script type="text/javascript">

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

//每一部分是一个类的对象,每一部分包含一个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>

以上是关于canvas,绘制七巧板的主要内容,如果未能解决你的问题,请参考以下文章

canvas,绘制七巧板

Canvas入门-利用Canvas画国旗

canvas的基础使用。

canvas 入门-利用 canvas 制作一个七巧板

canvas——七巧板

html 实验室:通过Canvas制作七巧板