代码哪里出错了呢？不能出现七巧板
欧耶233
2016-04-10 23:08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas {
border: 1px solid #CCC;
margin: 50px auto;
display: block;
/*不设置宽高的时候默认是300px宽 150px高*/
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
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:'black'},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'red'},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'black'}
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'red'},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'black'}
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'red'},
]
window.onload = function() {
var canvas = document.getElementById('canvas');
canvas.height=768;
canvas.width=1024;
if(canvas.getContext('2d')){
var content=canvas.getContext('2d');
}else{
alert('当前浏览器不支持canvas');
};
for(var i=0; i<tangram.length; i++)
draw(tangram[i],content);
}
function draw(piece,cxt){
cxt.beginPath();
cxt.moveTO(piece.p[0].x,piece.p[0].y);
for(var i=1;i<picec.p.length;i++)
cxt.lineTo(piece.p[i].x,piece.p[i],y);
cxt.closePath();
cxt.fillStyle=piece.color;
cxt.fill();
}
</script>
</body>
</html>
2回答
-
- xxboom
- 2016-04-11 09:27:05
数组tangram有两行没有逗号，cxt.moveTo写成了cxt.moveTO，for(var i=1;i<picec.p.length;i++)中的piece，cxt.lineTo(piece.p[i].x,piece.p[i],y)中的最后一个点号写成了逗号。全是低级错误
-
- 洛黑
- 2016-05-01 11:18:34
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas数组绘制七巧板</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa; margin:50px auto; display:block;"></canvas>
<script>
var tangram=[
{p:[{x:0,y:0},{x:600,y:0},{x:300,y:300}],color:"#caff67"},
{p:[{x:0,y:0},{x:300,y:300},{x:0,y:600}],color:"#67becf"},
{p:[{x:600,y:600},{x:600,y:300},{x:600,y:600},{x:600,y:150}],color:"#ef3d61"},
{p:[{x:600,y:150},{x:600,y:600},{x:300,y:300}],color:"#a594c0"},
{p:[{x:300,y:300},{x:600,y:600},{x:300,y:600},{x:150,y:600}],color:"#fa8ccc"},
{p:[{x:150,y:600},{x:300,y:600},{x:0,y:600}],color:"#f6ca29"},
{p:[{x:600,y:300},{x:600,y:600},{x:300,y:600}],color:"#f5f91a"},
]
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=600;
canvas.height=600;
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>按照老师的视频做的，只不过改了尺寸，为何没有效果？求大神告知
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题