为什么省略 beginPath() 会重绘所有内容? [英] Why does omitting beginPath() redraw everything?

问题描述

如果没有 context.beginPath(); 顶部的 10px 红色笔划将被重绘为 30px 绿色笔划，即使在笔划已经完成之前不会调用 30px 和绿色上下文属性被绘制.这是为什么呢?

Without context.beginPath(); the 10px red stroke at the top is redrawn as a 30px green stroke, even though the 30px and green context properties aren't called until after the stroke has already been drawn. Why is that?

window.onload = function() {
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");  

context.moveTo(10,50);
context.lineTo(400,50);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();

//context.beginPath();
context.moveTo(10,120);
context.lineTo(400,120);
context.lineWidth = 30;
context.strokeStyle = "green";
context.stroke();
};

推荐答案

默认的内部Path对象内部会累积所有的path方法调用如lineTo、rect、arc 等(有少数例外，例如 fillRect、strokeRect、fillText 等. 根据当前设置直接光栅化).目前这些只是向量表示.

The default internal Path object accumulates internally all path method calls such as lineTo, rect, arc and so forth (with a few exceptions such as fillRect, strokeRect, fillText etc. which are rasterized directly based on current settings). These are at this point only vector representations.

每次调用 stroke() 或 fill() 时，Path 对象都会使用当前的描边和/或填充颜色设置光栅化.

Every time you call stroke() or fill() the Path object is rasterized with the current stroke and/or fill color settings.

栅格化路径后，它不会自行清除，您可以继续累积路径.

After you have rasterized the path it does not clear itself and you can continue to accumulate paths to it.

beginPath() 是丢弃现有(子)路径并重新开始的唯一方法.由于它只清除内部路径而不是画布上的光栅化结果，因此除非您想重用这些路径，否则这通常不会成为问题.

beginPath() is the only way to discard existing (sub) paths and start fresh. As it only clears the internal paths and not the rasterized result on the canvas this is usually never a problem unless you want to reuse those paths.

当 Path 对象在更多浏览器中公开时，还有另一种方法可以在不使用 beginPath() 的情况下执行此操作(目前只有 Chrome 允许您使用 Path 对象直接但似乎还没有将它集成到画布上使用).

There is another way you can do this without using beginPath() when the Path object is exposed in more browsers (currently only Chrome let you use a Path object directly but does not seem to integrate it for canvas use quite yet).

您可以制作不同的 Path 对象并分别对它们进行光栅化:

You could make different Path objects and rasterize those separately:

var path1 = new Path();
var path2 = new Path();

path1.moveTo(10,50);
path1.lineTo(400,50);

context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke(path1);

path2.moveTo(10,120);
path2.lineTo(400,120);

context.lineWidth = 30;
context.strokeStyle = "green";
context.stroke(path2);

在这里你不需要 beginPath() 并且你可以重用这些对象 - 结合翻译等你基本上有一个更面向对象的画布.

Here you won't need beginPath() and you can reuse those objects - combined with translate and so forth you basically have a more object oriented canvas.

附带说明:许多人的印象是 closePath() 将结束"路径，但它所做的只是关闭连接第一个点和最后一个点的循环".您仍然可以为其添加新路径.

As a side note: Many have the impression that closePath() will "end" the path but all it does is to close the "loop" connecting the first point with the last point. You can still add new paths to it.

这篇关于为什么省略 beginPath() 会重绘所有内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！