3

このコードは、Firefox (17.0.1) で期待どおりに機能しません。drawLine同じパラメーターで関数を呼び出すたびに、同じ位置に行を書き込むことを期待しています。ChromeとIEでは、これが当てはまります。しかし、Firefoxで 2 回目に実行すると、最初の行が描画された場所から新しい行のローテーションが継続され、2 つの行が表示されます。誰かがなぜこのように振る舞うかを説明できればいいでしょう。

T

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function draw(){
  var canvas = document.getElementById('mycanvas');

  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#993333'       
    drawLine(ctx, 100,100,100,200);
    drawLine(ctx, 100,100,100,200);
  }

  function drawLine(context, x1, y1, x2, y2) {
    context.save();
    context.translate(x1, y1);
    context.moveTo(0, 0);
    context.rotate(1);
    context.lineTo(x2,y2);
    context.stroke();
    context.restore();
  }

}
</script>
</head>
<body onload="draw();">
   <canvas id="mycanvas"></canvas>
</body>
</html>
4

1 に答える 1

4

これで修正されるはずです。

function drawLine(context, x1, y1, x2, y2) {
    context.save();
    context.translate(x1, y1);
    context.beginPath();       // <--- start a new path. If you don't do this, previous paths may get mixed in with the one you're currently drawing.
    context.moveTo(0, 0);
    context.rotate(1);
    context.lineTo(x2,y2);
    context.closePath();      // close that path. 
    context.stroke();
    context.restore();
}

ここでのデモ: http://jsfiddle.net/kMPLQ/2/

于 2012-12-06T19:44:11.860 に答える