大家帮我看下，为什么我的七巧板少了一个黄色的三角？
来源：2-2 绘制直线、多边形和七巧板
草莓and芒果
2015-05-28 11:39
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>canvas绘制七巧板</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaaa;display: block;margin: 50px auto;">
当前浏览器不支持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:"#f951a"},
{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"},
]
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 )
}
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>
写回答
关注
1回答
-
- 草莓and芒果
- 2015-05-28 11:54:17
找到自己的原因了，是数组中黄色那块的颜色写错了，l和1傻傻分不清楚，嘿嘿
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题