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>
Each time that I press draw, the speed at which it completes seems to slow down exponentially. Could anyone know why this is happening?
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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
