自己寫(xiě)的代碼 。顏色、大小有點(diǎn)區(qū)別
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>七巧板繪制</title>
</head>
<body>
? ? <canvas id="canvas" style="border:1px solid grey; display:block; margin:100px auto;">
? ? </canvas>
? ? <script>
? ? ? ? var arr = [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? y: 0
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 400,
? ? ? ? ? ? ? ? ? ? y: 0
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "red"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? y: 0
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "blue"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 400,
? ? ? ? ? ? ? ? ? ? y: 0
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 400,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 300,
? ? ? ? ? ? ? ? ? ? y: 300
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 300,
? ? ? ? ? ? ? ? ? ? y: 100
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "green"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 300,
? ? ? ? ? ? ? ? ? ? y: 100
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 300,
? ? ? ? ? ? ? ? ? ? y: 300
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "orange"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 300,
? ? ? ? ? ? ? ? ? ? y: 300
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 100,
? ? ? ? ? ? ? ? ? ? y: 300
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "yellow"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 100,
? ? ? ? ? ? ? ? ? ? y: 300
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 0,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "purple"
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? p: [{
? ? ? ? ? ? ? ? ? ? x: 400,
? ? ? ? ? ? ? ? ? ? y: 200
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 400,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? ? ? x: 200,
? ? ? ? ? ? ? ? ? ? y: 400
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? color: "brown"
? ? ? ? ? ? }
? ? ? ? ]
? ? ? ? window.onload = function () {
? ? ? ? ? ? var canvas = document.getElementById("canvas");
? ? ? ? ? ? canvas.width = 400;
? ? ? ? ? ? canvas.height = 400;
? ? ? ? ? ? var context = canvas.getContext("2d");
? ? ? ? ? ? for (var i = 0; i < arr.length; i++)
? ? ? ? ? ? ? ? draw(arr[i], context)
? ? ? ? }
? ? ? ? function draw(piece, cxt) {
? ? ? ? ? ? cxt.beginPath();
? ? ? ? ? ? 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();
? ? ? ? ? ? cxt.fillStyle = piece.color;
? ? ? ? ? ? cxt.fill();
? ? ? ? }
? ? </script>
</body>
</html>
2015-12-15
牛牛牛！