HTML5 Canvas随着每个笔划减慢并清除

Question

HTML5 Canvas随着每个笔划减慢并清除

我一直在玩HTML5 Canvas,我注意到了一些我无法在网上找到解决方案的东西.这是我正在玩的简单代码

<!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>

Run Code Online (Sandbox Code Playgroud)

每次我按下绘图时,它完成的速度似乎都呈指数减速.谁能知道为什么会这样？

它通过IE减慢最多.Chrome似乎可以通过每次绘制点击更快地完成它,但您仍然可以确定地注意到速度降低.

Answer 1

小智 17

的<canvas>元件跟踪的电流路径(即,设置点,线和曲线的).canvas.moveTo,canvas.lineTo和canvas.stroke所有操作都在当前路径上运行.每次打电话canvas.moveTo或canvas.lineTo您正在添加当前路径.随着路径变得越来越复杂,绘图变得越来越慢.

您可以通过呼叫清除路径canvas.beginPath().在绘制函数开始时执行此操作应该摆脱减速.

另外，您可以移动 context.lines(); 将函数放在 for 循环之外以获得更好的优化。构建路径，然后一次性抚摸它们，而不是多次。 (3认同)
谢谢你！在 W3Schools 的画布文档中，它并没有真正指定关闭路径的重要性，但我实际上是在 30 秒后关闭了我正在制作的游戏中的浏览器。 (2认同)

归档时间：	13 年，10 月前
查看次数：	3373 次
最近记录：	13 年，10 月前