3

此代码在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>
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 回答