HTML5画布不恢复旋转在Firefox？

此代码不能按我期望的Firefox（17.0.1）。我希望每次用相同的参数调用drawLine函数时，它都会在同一位置写入该行。并在Chrome和IE这是这种情况。但在火狐运行它第二次似乎继续从第一次绘制的新线的轮换给我两条线。如果有人能够解释为什么这样表现，那将会很好。HTML5画布不恢复旋转在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>

来源

2012-12-06 Trond R

它作为在Firefox 17.0.1 http://jsfiddle.net/loktar/kMPLQ/1/ – Loktar

Loktar嗨预期为我工作。所以你只看到一条线？因为我不是当我看着你所做的jsfiddle吗？ –

是的只有一行：？和FF *只是*更新，当我打开它来测试小提琴，到17.0.1。我希望你有更多的代码导致这个问题。很奇怪。 – Loktar

这应该修复它。

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-06 19:44:11 Shmiddty

工作。谢谢Shmiddty。奇怪的是，它在不同的机器上表现不同。知道为什么会很有趣。 –

它似乎与32/64位系统差异有关。 – Shmiddty

HTML5画布不恢复旋转在Firefox？

回答

相关问题