Last active
August 11, 2016 18:52
-
-
Save Teraflopst/189bb055ba3fb441f527 to your computer and use it in GitHub Desktop.
Lab: Make a tangram by Canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>七巧板</title> | |
</head> | |
<body> | |
<div style="width: 400px; height: 400px; margin: 0 auto;"> | |
<canvas id="canvas"></canvas> | |
</div> | |
<script> | |
//设置七块碎片 | |
var tangram = [ | |
{p:[{x:0,y:0},{x:400,y:0},{x:200,y:200}],color:"#caff67"}, | |
{p:[{x:0,y:0},{x:200,y:200},{x:0,y:400}],color:"#67becf"}, | |
{p:[{x:400,y:0},{x:400,y:200},{x:300,y:300},{x:300,y:100}],color:"#ef3d61"}, | |
{p:[{x:300,y:100},{x:300,y:300},{x:200,y:200}],color:"#f9f51a"}, | |
{p:[{x:200,y:200},{x:300,y:300},{x:200,y:400},{x:100,y:300}],color:"#a594c0"}, | |
{p:[{x:100,y:300},{x:200,y:400},{x:0,y:400}],color:"#fa8ecc"}, | |
{p:[{x:400,y:200},{x:400,y:400},{x:200,y:400}],color:"#f6ca29"} | |
]; | |
//调用函数:循环绘制七块 | |
window.onload = function () { | |
var canvas = document.getElementById('canvas'); | |
canvas.width = 400; | |
canvas.height = 400; | |
var context = canvas.getContext('2d'); | |
for (var i = 0; i < tangram.length; i++) { | |
draw(tangram[i], context); | |
} | |
}; | |
//函数:绘制其中一块碎片 | |
function draw(piece, ctx) { | |
ctx.beginPath(); | |
ctx.moveTo(piece.p[0].x, piece.p[0].y); | |
for (var i = 1; i < piece.p.length; i++) { | |
ctx.lineTo(piece.p[i].x, piece.p[i].y); | |
} | |
ctx.closePath(); | |
ctx.fillStyle = piece.color; | |
ctx.fill(); | |
ctx.strokeStyle = "black"; | |
ctx.lineWidth = 3; | |
ctx.stroke(); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment