Javascript 如何在动画画布中增加简单形状的颜色

“我的画布”用于以不同颜色绘制和设置某些线条的动画，可能如下所示：

HTML:

当这些线相交时，我希望它们的颜色相乘（就像Photoshop过滤器）

---

我找到了如何按像素执行此操作的方法，但由于我的画布将保存动画，我想知道是否有比迭代每个像素并在每个循环中手动计算颜色值更好的选择。

您不需要在整个画布上按像素执行此操作

如果你只使用现代浏览器，你可以

c.globalCompositeOperation = "multiply";

否则，你可以

使用这些偏移量抓取

getImageData（）

（取决于抓取较小的部分并进行修改比抓取所有部分然后使用偏移量更有效）

修改与线条厚度相关的周围部分。如果颜色是透明的，只需在迭代时提前退出即可

使用

putImageData（）

---

这就是我要找的，谢谢。我已经找到了globalCompositeOperation属性，但是我没有找到任何将“乘法”列为有效值的源。您知道提供完整列表的源代码吗？@alpo检查：请注意（令人惊讶的是）IE（包括版本11）还不支持新的混合模式（状态：推荐）。对于这个像素迭代是必要的。

var elem = document.getElementById('myCanvas');
var c = elem.getContext('2d');

var count = 0;

function draw() {
    c.save();
    c.clearRect(0, 0, 400, 400);

    // red
    c.beginPath();
    c.moveTo(20, 50);
    c.lineCap = "round";
    c.lineWidth = 20;
    c.lineTo(380, 50);
    c.strokeStyle = "#f00";
    c.stroke();

    // green
    c.beginPath();
    c.moveTo(20, 350);
    c.lineCap = "round";
    c.lineWidth = 20;
    c.lineTo(380, 350);
    c.strokeStyle = "#0f0";
    c.stroke();

    // blue
    c.translate(200, 200);
    c.rotate(count * (Math.PI / 180));
    c.beginPath();
    c.moveTo(0, 0);
    c.lineCap = "round";
    c.lineWidth = 20;
    c.lineTo(180, 0);
    c.strokeStyle = "#00f";
    c.stroke();

    c.restore();

    count++;
}

setInterval(draw, 20);

c.globalCompositeOperation = "multiply";