使用绘制矩形的不同方法

Question

正在尝试学习 javascript canvas，但很难确定哪一个是首选：

<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() 时，之前创建的子路径都会被删除。但是什么时候开始使用路径，就像在最后一个代码片段中一样。最后一个子路径不需要擦除吗？

我想我似乎忘记了路径的概念；我到处都读到它是 "like drawing with a pencil and then inking the lines"。伟大的！但是 none 似乎可以解释 为什么 这是。有一个 strokeRect，为什么不直接画一条线呢？跟优化有关系吗？

Answer 1

beginPath 重置上下文中的当前路径，如果您在上下文中创建了任何 settings/adding 路径，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

使用绘制矩形的不同方法

Different methods of using drawing rectangle

javascript

canvas

html5-canvas