帮忙看看怎么没有显示

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

D调是一种美

2016-07-08 20:12

<body>

  <canvas id="canvas">你的浏览器无法打开请升级</canvas>  

  <script type="text/javascript">

  window.onload=function(){

  var canvas=document.getElementById("canvas");

var data=[

{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#caff67"},

{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#67becf"},

{p:[{x:0,y:800},{x:400,y:800},{x:400,y:400}],color:"#ef3d61"},

{p:[{x:400,y:400},{x:600,y:600}],color:"#f9f51a"},

{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800}],color:"#a594c0"},

{p:[{x:400,y:400},{x:600,y:600},{x:800,y:400}],color:"#fa8ecc"},

{p:[{x:600,y:200},{x:800,y:400}],color:"#f6ca29"}

]


canvas.width=800;

canvas.height=800;

var context=canvas.getContext("2d");

for(var i=0;i<data.length;i++){

    draw(data[i],context)

}

function draw(piece,cxt){

    cxt.beginPath()

    cxt.moveTo(data.p[0].x,data.p[0].y);

for(var i=0;i<data.p.length; i++){

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

}

   cxt.closePath();

   cxt.fillStyle=data.color;

   cxt.fill();

}


}

</script>


写回答 关注

2回答

  • _黑骑士
    2016-07-10 00:19:02

    http://img.mukewang.com/5781237d00018e8c08220430.jpg

    因为函数名里的局部变量是piece,而不是data,在使用data时会去寻找全局变量data,而全局变量的data是一个数组,没有data.p和data.color属性


  • 星梦客
    2016-07-09 00:06:08

    function draw(piece,cxt){

        cxt.beginPath()

        cxt.moveTo(data.p[0].x,data.p[0].y);

    for(var i=0;i<data.p.length; i++){

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

    把大括号里面的data换成piece

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

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

96746 学习 · 1000 问题

查看课程

相似问题