Html5 canvas 为什么可以'；我不能在HTML5画布上画两条不同颜色的线吗？

我试图用HTML5画布在绿线的左边画一条红线。以下是我的javascript：

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();

// Draw the red line.
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);​

然而，在Google Chrome中，我在一条浅绿色线的左边有一条深绿色线。为什么？我给stroke打了两次电话对吗？因此，为什么我的第一次中风会影响我的第二次中风

---

是一个JSFIDLE，它解释了我的意思。

就我所知，webgl或opengl的工作方式非常有趣，就像一个大型状态机，您可以在其中定义状态、绘制、再次更新状态绘制，等等

虽然我不确定画布是否遵循相同的原则，即使它只是用于简单的2d渲染

我设法让它工作起来，只是开始了一条新的道路

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();

// Draw the red line.

canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.strokeStyle = '#FF0000';
canvasContext.stroke();

canvasContext.beginPath(); // begin new path
// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#00FF00';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);​

---

我在webgl方面的经验有限，因此如果我弄错了，请纠正我。

您不是在调用

canvasContext.beginPath（）开始绘制第二行时

为了使绘图部分更加独立，我添加了空格：

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;

var canvasContext = canvas.getContext('2d');

// Draw the red line.
canvasContext.beginPath();
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.beginPath();
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas); 

演示：
我很确定Canvas元素和WebGL是不同的东西。@Blender是的，我认为它们的实现不同。我不确定Canvas是否遵循与*gl相同的原则，它只是从示例代码中看起来与opengl类似，你知道的，比如获取上下文设置颜色等等，所以我不能太确定，谢谢。谢谢，如果是这样的话，我有第二个问题：为什么左边的线比另一条暗？我没有为任何一行设置不透明度值，那么为什么画布会混合颜色呢？我真的不知道。看一下，它看起来像是清除了子路径，所以第二行可能（不知怎么的）是前一行和当前行的组合。我认为这是因为你画了两次，如果你去掉最初的笔划，它们将是相同的颜色，尽管这仍然很奇怪，我不认为在多次调用stroke时，帧缓冲区会被清除，或者与默认的不透明度有关。这两条线的不透明度为0.5，因为它们是1px宽，但它被绘制为2px宽，因为它们是基于完整编号的x值绘制的。第一条线画了两次（就像萨米5年前说的那样），第二条线只画了一次。第一条线的不透明度在第二次绘制时变为1.0，但第二条线保持为0.5。如果将两条线移动半个像素，则它们的颜色相同：