[英]How to multiply colors of simple shapes in an animated canvas
My canvas is used for drawing and animating some lines in different colors, which could look like this: http://jsfiddle.net/swknhg3t/ 我的画布用于以不同的颜色绘制和设置一些线条的动画,如下所示: http : //jsfiddle.net/swknhg3t/
HTML: HTML:
<canvas id="myCanvas" width="400px" height="400px"></canvas>
JavaScript: 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);
When those lines intersect, I want their colors being multiplied (like the Photoshop filter). 当这些线相交时,我希望它们的颜色成倍增加(例如Photoshop滤镜)。
I found a nice explanation on how to do this pixelwise, but since my canvas will hold an animation I wonder if there is a better option than iterating over every pixel and calculating the color value manually in every loop. 我找到了关于如何按像素进行此操作的很好的解释 ,但是由于我的画布上将保留动画,所以我想知道是否有比迭代每个像素并在每个循环中手动计算颜色值更好的选择。
You shouldn't need to do it on an entire canvas per-pixel basis. 您无需在每个像素的整个画布上执行此操作。
If you're only using modern browsers, you could do... 如果您仅使用现代浏览器,则可以...
c.globalCompositeOperation = "multiply";
Otherwise, you could... 否则,您可以...
getImageData()
(depending on grabbing smaller portions and modifying is more performant than grabbing it all and then using the offsets) getImageData()
(取决于获取较小的部分,并且修改要比全部获取然后使用偏移量更有效) putImageData()
to render it back. putImageData()
将其渲染回去。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.