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

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

来源：2-2 绘制直线、多边形和七巧板

sun3660873

2016-07-14 10:23

<!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>

写回答关注

4回答

梦想编辑者

2016-07-14 16:35:16

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

0 0
梦想编辑者

2016-07-14 16:24:30

一定要细心

0 1
大咪

2016-07-14 11:44:58

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

0 0
大咪

2016-07-14 11:43:29

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();

0 0

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96746 学习 · 1000 问题

相似问题

回答 4

回答 2

回答 3

回答 2

回答 3