gpt4 book ai didi

HTML5 Canvas 无法在 Firefox 中恢复旋转?

转载 作者:可可西里 更新时间:2023-11-01 12:51:09 25 4
gpt4 key购买 nike

此代码在 Firefox (17.0.1) 中无法正常工作。每次我使用相同的参数调用 drawLine 函数时,我希望它在相同的位置写入该行。在 ChromeIE 中就是这种情况。但是在 Firefox 中,第二次运行它似乎继续从第一条绘制的地方开始旋转新线,给我两条线。如果有人能解释为什么它会这样,那就太好了。

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>

最佳答案

这应该可以解决它。

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 Canvas 无法在 Firefox 中恢复旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13747263/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com