HTML5 Canvas每个笔画都变慢，清晰 [英] HTML5 Canvas slows down with each stroke and clear
问题描述
我一直在使用HTML5 Canvas，我注意到一些我在网上找不到分辨率的东西。这是我玩的简单代码
I've been playing around with the HTML5 Canvas and I've noticed something that I couldn't find a resolution for online. Here's the simple code I'm playing with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" style="border: 1px solid;" width="200" height="200"></canvas>
<br />
<button id="draw">draw</button>
<button id="clear">clear</button>
</body>
</html>
<script type="text/javascript">
(function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
$("#draw").bind("click", function () {
for (var i = 0; i < 200; i++) {
context.moveTo(0, i);
context.lineTo(100, 100);
context.stroke();
}
});
$("#clear").bind("click", function () {
context.clearRect(0, 0, 200, 200);
});
} ());
</script>
每次我按下draw，它完成的速度似乎以指数方式减慢。谁能知道为什么会发生这种情况？
Each time that I press draw, the speed at which it completes seems to slow down exponentially. Could anyone know why this is happening?
它通过IE减慢了最多。
It slows down the most through IE. Chrome seems to complete it faster with each draw click, but you can still definitely notice a speed reduction.
推荐答案
< canvas> 元素跟踪当前路径（即点，线和曲线的集合）。 canvas.moveTo ， canvas.lineTo 和 canvas.stroke all都在当前路径上操作。每次调用 canvas.moveTo 或 canvas.lineTo 时，都将添加到当前路径。
The <canvas> element keeps track of a current path (i.e., set of points, lines, and curves). canvas.moveTo, canvas.lineTo, and canvas.stroke all operate on the current path. Every time you call canvas.moveTo or canvas.lineTo you are adding to the current path. As the path gets more and more complex, drawing gets slower and slower.
您可以通过调用 canvas.beginPath（）来清除路径
You can clear the path by calling canvas.beginPath(). Doing this at the start of your draw function should get rid of the slowdown.
这篇关于HTML5 Canvas每个笔画都变慢，清晰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
