怎么出不来，帮忙看看
慕工程3118143
2016-05-24 22:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500" style="border:1px solid #999;margin:0 auto;display:block">
当前浏览器不支持canvas</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas')
var cantext=canvas.getContext('2d')
var tangram=[
{p:[{x:0,y:0},{x:250,y:250},{x:0,y:500}],color:"red"},
{p:[{x:0,y:0},{x:250,y:250},{x:500,y:0}],color:"green"},
{p:[{x:250,y:250},{x:375,y:125},{x:375,y:375}],color:"#fof"},
{p:[{x:500,y:0},{x:375,y:125},{x:375,y:375},{x:500,y:250}],color:"#0ff"},
{p:[{x:250,y:250},{x:375,y:125},{x:375,y:375},{x:125,y:375}],color:"#888"},
{p:[{x:125,y:370},{x:0,y:500},{x:250,y:500}],color:"#00f"},
{p:[{x:250,y:500},{x:500,y:500},{x:500,y:250}],color:"#00f"}
]
for(var i=0;i<tangram.length;i++){
draw(tangram[i],cantext)
}
function draw(piece,cxt){
cxt.beginPath()
cxt.moveTo(piece.p[0].x,piece.p[0].y)//获取到tangram[i]的第p[0]个的第一个元素的x与y
for(var i=1;i<piece.length;i++){
cxt.lineTo(piece.p[i].x,piece.p[i].y)
}
cxt.closePath()
cxt.fillStyle=piece.color
cxt.fill()
cxt.strokeStyle="black"
cxt.lineWidth=3
cxt.stroke()
}
}
</script>
</body>
</html>
1回答
-
- Dling
- 2016-05-25 00:39:21
for(var i=1;i<piece.p.length;i++){ cxt.lineTo(piece.p[i].x,piece.p[i].y) }注意for循环里面是 piece.p.length;
炫丽的倒计时效果Canvas绘图与动画基础
96746 学习 · 1000 问题
相似问题