Question

基本上，我正在尝试创建一个跨越多个画布的网格，但我在第一个和最后一个上面都有奇怪的行为。笔划颜色和间距发生变化。我不知道它会怎么样。这是相关代码，请点击链接查看其实际操作。（该网站正在进行中） 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引起的，这使得它们从默认尺寸拉伸/缩小而不是调整大小。 / p>

Answer 1

尝试按标签属性width和height设置宽幅和高度，如下所示：

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

不是style属性。这是非常重要的。因为当您设置style属性并指向width和height属性时，默认真实width和height的画布会延伸到新的尺寸。

在多幅画布上绘制时的奇怪行为

1 个答案: