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

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滤镜）。

我找到了关于如何按像素进行此操作的很好的解释 ，但是由于我的画布上将保留动画，所以我想知道是否有比迭代每个像素并在每个循环中手动计算颜色值更好的选择。

Answer 1

您无需在每个像素的整个画布上执行此操作。

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

c.globalCompositeOperation = "multiply";

jsFiddle 。

否则，您可以...

1. 找出线的交点
2. 使用这些偏移量获取getImageData() （取决于获取较小的部分，并且修改要比全部获取然后使用偏移量更有效）
3. 修改与线条粗细有关的周围部分。 如果颜色是透明的，只需在迭代时提早保释。
4. 使用putImageData()将其渲染回去。