javascript - 如何在动画 Canvas 中增加简单形状的颜色

Question

我的 Canvas 用于绘制不同颜色的一些线条并为其设置动画，可能如下所示: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关于如何按像素执行此操作，但由于我的 Canvas 将保存动画，我想知道是否有比迭代每个像素并在每个循环中手动计算颜色值更好的选择。

Answer 1

您不需要在整个 Canvas 上的每个像素上执行此操作。

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

c.globalCompositeOperation = "multiply";

jsFiddle .

否则，你可以...

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