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

否则，你可以......

Figure out the line intersections
使用这些偏移量来抓取getImageData()（取决于抓取较小的部分并进行修改比抓取所有部分更高效，然后使用偏移量）
修改与线条粗细相关的周围部分。如果颜色是透明的，那么在迭代时只需提前保释。
使用putImageData()将其渲染回来。

如何在动画画布中混合简单形状的颜色

1 个答案: