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");      
    }
  }
}

編集：私はなんとか問題を修正することができました。これは、キャンバスの幅と高さを、canvas.widthとcanvas.heightではなく、style.widthとstyle.heightで設定したために発生しました。これにより、サイズ変更ではなく、デフォルトのサイズから拡大/縮小されました。

4

1 に答える 1

2

タグ属性によってキャンバスに幅と高さを設定してみてwidthくださいheight。

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

style属性ではありません。それは非常に重要です。属性を設定し、そことプロパティstyleをポイントすると、デフォルトの実際のキャンバスが新しいサイズに拡大されるためです。widthheightwidthheight

于 2012-09-02T16:19:27.133 に答える