Question

此代码无效，正如我在 Firefox （17.0.1）中所期望的那样。我希望每当我用相同的参数调用drawLine函数时，它就会将该行写在相同的位置。在 Chrome 和 IE 中就是这种情况。但是在第二次运行它的 Firefox 中似乎继续从第一个绘制的新线的旋转给我两行。如果有人可以解释为什么它会这样做，那就太好了。

Ť

<!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>

Answer 1

这应该解决它。

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/

HTML5画布不能在Firefox中恢复旋转？

1 个答案: