HTML Canvas 组合：结合“lighter”和“source-atop”效果答案

【问题标题】：HTML Canvas composition: combining "lighter" and "source-atop" effectsHTML Canvas 组合：结合“lighter”和“source-atop”效果
【发布时间】：2015-09-25 05:51:48
【问题描述】：

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

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

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

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

我想要一个画布解决方案，它可以在没有蓝色背景的较轻示例中生成立方体。我意识到我可以只定义立方体的点并使用填充样式和路径来创建立方体，但我计划使用比立方体更复杂的图标形状，当我已经有了一个灰度 .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);

【问题讨论】：

你试过放半透明蓝色吗：ctx.fillStyle = "rgba(0,0,255,0.5)";
呸，我刚刚意识到我在标题和步骤中输入了错误的构图类型。我用的是打火机，不是亮度。我会适当地编辑问题。我刚试过。它会产生一个更苍白的立方体，但在两种情况下（更轻的和顶部的源）都存在相同的问题。

标签： javascript html canvas composition

【解决方案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);

这会产生所需的结果。

【讨论】：