1

基本上，我正在尝试创建一个跨越多个画布的网格，但我在第一个和最后一个画布上出现了奇怪的行为。笔触颜色和间距已更改。我不明白它怎么会发生。这是相关代码，请点击链接查看它的实际效果。（该网站正在进行中） http://www.gjar-po.sk/~hudak9c/test3/

var canvasCount = document.getElementsByTagName("canvas").length;

if (canvasCount > 0) {
  for (var i = 0; i < canvasCount; i++) {
    var canvas = document.getElementsByTagName("canvas")[i];

    if (canvas.getContext("2d")) {
      var can = canvas.getContext("2d");

      can.beginPath();

      for (var x = 5; x < 640; x += 20) {
        can.moveTo(x, 0);
        can.lineTo(x, canvas.height);
      }

      for (var y = 5; y < canvas.height; y += 20) {
        can.moveTo(0, y);
        can.lineTo(canvas.width, y);
      }

      can.lineWidth = 1;
      can.strokeStyle = "#000";
      can.stroke();
    } else {
      alert("getContext fail");      
    }
  }
}

编辑：我设法解决了这个问题。这是由我（显然）通过 style.width 和 style.height 设置画布的宽度和高度引起的，而不是通过 canvas.width 和 canvas.height，这使它们从默认尺寸拉伸/收缩而不是调整大小。

4

1 回答 1

2

尝试通过标签属性设置画布的宽度和高度，width如下height所示：

<canvas width="640" height="50">

不是按style属性。这非常重要。因为当您设置style属性并指向那里width和height属性时，您的画布将具有默认真实值width，并且height只会拉伸到您的新尺寸。

于 2012-09-02T16:19:27.133 回答