                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

不知道是哪里出错，只有一个灰色的框

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>倒计时效果</title>
</head>
<body>
   <canvas id="canvas" style="border:1px solid #aaa; display:block; margin:50px auto;">
       当前浏览器不支持canvas,请更换浏览器后再试(若支持则忽略此行代码)
   </canvas>
<script type="text/javascript">
   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"},

   ]

   window.onload = function(){
       var canvas = document.getElementById("canvas");
       canvas.width = 800;
       canvas.height = 800;

       var context = canvas.gtContext("2d");
       //使用context绘制

       for (var i = 0:i<tangram.length; i ++) {
           draw( tangram[i],context)
       }
       function draw( plice , cxt){
           cxt.beginPath();
           cxt.moveTo( plice.p[0].x , plice.p[0].y);
           for (var i = 1; i<plice.p.length ; i++) {
               cxt.closePath();
               cxt.fillStyle=plice.color;
               cxt.fill();

               context.lineWidth = 3
                context.strokeStyle = "red"
               context.stroke()//stroke笔画的意思，用来绘制线条
           }
</script>

</body>
</html>

02:55

sun3660873

2016-07-14

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-2

关注问题我要回答

1177

操作

收起

4 回答

梦想编辑者
2016-07-14

忘记说for循环 i=1; 后面是分号不是冒号

0 回复有任何疑惑可以回复我~

收起回答

梦想编辑者
2016-07-14

一定要细心

1 回复有任何疑惑可以回复我~

收起回答

大咪
2016-07-14

就是你的for循环遍历完得有最终的确定点呀，所以少了一行代码，你把cxt.lineTo(plice.p[i].x,plice.p[i].y);这句话加上去试试，看看有没有用

0 回复有任何疑惑可以回复我~

收起回答

大咪
2016-07-14

function draw( plice , cxt){
           cxt.beginPath();
           cxt.moveTo( plice.p[0].x , plice.p[0].y);
           for (var i = 1; i<plice.p.length ; i++) {

cxt.lineTo(plice.p[i].x,plice.p[i].y);

               cxt.closePath();
               cxt.fillStyle=plice.color;
               cxt.fill();