HTML Canvas 组合：组合 "lighter" 和 "source-atop" 效果

Question

本质上，我有一个立方体的灰度图像，我想使用 HTML 5 canvas 为不同的颜色着色。我目前不太关心浏览器兼容性，所以我一直在查看此处列出的 globalCompositeOperation 属性值：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

本质上，我想结合"source-atop"和"lighter"的效果。仅使用 source-atop，我得到了一个蓝色形状，但是不同深浅的灰色都填充了相同的蓝色阴影，所以我得到了一个扁平的、倾斜的六边形而不是立方体。

只使用较轻的复合选项，我更接近我想要的效果。所有的立方体面都是我想要的不同深浅的蓝色，但是之前透明的背景变成了纯蓝色。

我想要一个 canvas 解决方案，它可以在没有蓝色背景的较亮示例中生成立方体。我意识到我可以只定义立方体的点并使用填充样式和路径来创建立方体，但我计划使用比立方体更复杂的图标形状，而且我不想在已经有了灰度 .png 准备就绪，除非我绝对必须。

目前的代码非常基础

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var cube = new Image();
cube.src = "url" //path to gray-scale cube image.

ctx.clearRect(0, 0, canvas.width, canvaseheight);
ctx.drawImage(cube, 0, 0);
ctx.globalCompositeOperation = "lighter"; //or "source-atop"
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

Answer 1

原来你可以很容易地把它们结合起来。这是我最终完成这项任务的方式。

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var cube = new Image();
cube.src = "url" //path to gray-scale cube image.

//get a blue mask that fills the entire cube region
ctx.clearRect(0, 0, canvas.width, canvaseheight);
ctx.drawImage(cube, 0, 0);
ctx.globalCompositeOperation = "source-atop";
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

//save that image off somewhere.
var blueMask = new Image();
blueMask.src = canvas.toDataURL();

ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.globalCompositeOperation = "source-over";

//draw the cube again
ctx.drawImage(cube, 0,0);

//draw the mask image over it with the 'lighter' composition setting.
ctx.globalCompositeOperation = "lighter";
ctx.drawImage(blueMask, 0, 0);

这会产生预期的结果。

HTML Canvas 组合：组合 "lighter" 和 "source-atop" 效果

HTML Canvas composition: combining "lighter" and "source-atop" effects

html

javascript

canvas

composition