Question

尝试学习javascript画布，但很难确定哪些是首选：

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.rect(10, 10, 100, 100);
    context.rect(50, 50, 100, 100);
    context.stroke();
</script>

或

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(10, 10, 100, 100);
    context.rect(50, 50, 100, 100);
    context.stroke();
</script>

或

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(10, 10, 100, 100);
    context.stroke();

    context.beginPath();
    context.rect(50, 50, 100, 100);
    context.stroke();
</script>

似乎无论我选择哪一个，都会画出两个三角形。据说每次调用beginPath（）时，前一个子路径都会被删除。但是，如何使用beginPaths，就像在上一个代码片段中一样。不需要删除最后一个子路径吗？

我想道路的概念似乎在我身上消失了;无处不在我读到它“就像用铅笔绘画然后上线”。大！但似乎没有人解释为什么这是。有一个strokeRect，为什么不立即有一条线？它与优化有关吗？

Answer 1

beginPath重置上下文中的当前路径，如果您在上下文中进行了任何设置/添加路径，beginPath将重置它们。在这个例子中：

context.beginPath();
context.rect(10, 10, 100, 100);
context.beginPath(); // Resets path
context.rect(50, 50, 100, 100);
context.stroke();

由于您在不调用stroke的情况下重置路径，因此您只能获得一个矩形。它与清除屏幕无关，只是清除上下文中的内容，可以这么说。

http://jsbin.com/getejuxeva/edit

如果你没有得到它的好处，请比较这两个：

http://jsbin.com/kojojofixa/1/edit

和

http://jsbin.com/gevacefumo/1/edit

使用绘图矩形的不同方法

1 个答案: