如何在动画画布中将简单形状的颜色相乘

Question

我的画布用于绘制一些不同颜色的线条并为其设置动画，如下所示：http://jsfiddle.net/swknhg3t/

HTML：

<canvas id="myCanvas" width="400px" height="400px"></canvas>

JavaScript：

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);

当这些线相交时，我希望它们的颜色相乘（如 Photoshop 滤镜）。

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

Answer 1

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

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

c.globalCompositeOperation = "multiply";

jsFiddle.

否则，你可以...

1. Figure out the line intersections
2. 使用这些偏移量来抓取getImageData()（取决于抓取较小的部分并进行修改比全部抓取然后使用偏移量更高效）
3. 修改与线条粗细相关的周围部分。如果颜色是透明的，只需在迭代时提早退出即可。
4. 使用putImageData() 将其渲染回来。