canvas七巧板
2016-12-01 本文已影响22人
沧桑月
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Test</title>
</head>
<body>
<p style="width: 100px;margin: 0 auto">aa</p>
<canvas id="canvas" style="border: 1px solid; margin: 0 auto; display: block;">
browser do not support canvas.
</canvas>
<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'}
];
function draw(tangram, cxt) {
var piece = tangram.p;
var color = tangram.color;
cxt.beginPath();
cxt.moveTo(piece[0].x, piece[0].y);
for (var i = 1; i < piece.length; i++) {
var p = piece[i];
cxt.lineTo(p.x, p.y);
}
cxt.closePath();
cxt.fillStyle = color;
cxt.fill();
}
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);
}
}
</script>
</body>
</html>
Paste_Image.png
