是否可以将两个独立的canvas元素的内容合并到一个单独的canvas元素中?
就像在Photoshop中“合并”两个或多个图层一样,有没有类似的方法呢?
我能想到的是一个绕路的方法,但不是很确定。我将两个canvi(哈哈)的内容导出为.png格式的图像,然后让第三个canvas元素使用某种混合算法(异或、混合、负片等)绘制这两张图片。
drawImage
即可。
以下是一个示例,将两个画布元素合并到第三个画布上:
```js
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
const ctx3 = canvas3.getContext('2d');var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = 'rgba(255,0,0,.4)';
ctx.fillRect(20, 20, 20, 80);
ctx.fillStyle = 'rgba(205,255,23,.4)';
ctx.fillRect(30, 30, 40, 50);
ctx.fillStyle = 'rgba(5,255,0,.4)';
ctx.fillRect(40, 50, 80, 20);
var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');
ctx2.beginPath();
ctx2.fillStyle = "pink";
ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1);
ctx2.fill();
ctx2.beginPath();
ctx2.clearRect(20, 40, 60, 20);
var can3 = document.getElementById('canvas3');
var ctx3 = can3.getContext('2d');
ctx3.drawImage(can, 0, 0);
ctx3.drawImage(can2, 0, 0);
<canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas>
<canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>
http://jsfiddle.net/bnwpS/878/
当然,您可以只使用两个(一个覆盖在另一个上面),但是三个效果更好。
如果您想要异或效果或其他效果,您可以随时更改 globalCompositeOperation
。
canvas
元素在CSS中没有指定背景。这将使它们透明。绝对定位所有的canvas
元素重叠在一起。例如,将它们全部包装在一个<div class="canvas-layers">
中,然后使用类似以下的 CSS:
/* Set to the same width/height as the canvases */
.canvas-layers { position:relative; width:400px; height:300px }
.canvas-layers canvas { position:absolute; top:0; left:0 }
让浏览器自动执行半透明区域之间的混合。
drawImage
并将一个画布作为源“图像”。例如,请参见:globalCompositeOperation
属性,并使用drawImage
将一个画布作为源。参见以下示例:我创建了一个简单、轻量级、开源的库,可以在一个 HTML Canvas 上下文到另一个上执行 Photoshop 风格的混合模式:context-blender。以下是示例用法:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
请查看README了解更多信息。
<div height="640" style="position: absolute;">
<canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
<canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>
我猜那段代码不是万无一失的,也不是完全正确的,但它能够工作。希望这会有所帮助。
如果不行的话,我会使用你提到的解决方法。(实际上我曾经制作过一个类似的应用程序,在一个屏幕外画出2D的阴影,并透明地将其覆盖在主画布上,看起来相当不错)