可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Why won't my multiple rectangles draw in the canvas?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <script src="Scripts/jquery-1.9.1.min.js"></script>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid red">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </body>
</html>

<script type ="text/javascript">  
  function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
  }

  // get canvas element.
  var elem = document.getElementById('myCanvas');

  // check if context exist
  if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"))
    myRect.push(new Shape(0, 40, 39, 25, "#333"))
    myRect.push(new Shape(0, 80, 100, 25, "#333"))

    context = elem.getContext('2d');
    for (i in myRect) {

      //console.log(x);

      context.fillRect(i.x, i.y, i.w, i.h)
    }
    //// x, y, width, height
    //context.fillRect(0, 0, 50, 50);

    //// x, y, width, height      
    //context.fillRect(75, 0, 50, 50);
  }
</script>

Thanks for help.

回答1:

Ok, so you were almost there. When you iterate round your array of rectangles, you are iterating over the array key not the objects themselves (see How to Loop through plain JavaScript object with objects as members?). Plus, as @jimjimmy1995 pointed out, you need to set the fill using .fillStyle as .fillRect does not have a fill parameter.

This code will work:

function Shape(x, y, w, h, fill) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.fill = fill;
}

// get canvas element.
var elem = document.getElementById('myCanvas');

// check if context exist
if (elem.getContext) {

    var myRect = [];

    myRect.push(new Shape(10, 0, 25, 25, "#333"));
    myRect.push(new Shape(0, 40, 39, 25, "#333"));
    myRect.push(new Shape(0, 80, 100, 25, "#333"));

    context = elem.getContext('2d');
    for (var i in myRect) {
        oRec = myRect[i];
        context.fillStyle = oRec.fill;
        context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);

    }

}

回答2:

Don't you need to give it the fill color?

context.fillStyle = i.fill;
context.fillRect(i.x,i.y,i.w,i.h);

HTML5, JavaScript and drawing multiple rectangles

问题:

回答1:

回答2:

收藏的人(0)

HTML5, JavaScript and drawing multiple rectangles

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮