Question

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

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

基本上，我想结合＆＃34; source-atop＆＃34;和＃34;打火机＆＃34;。使用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);

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组合：结合＆＃34;打火机＆＃34;和＆＃34; source-atop＆＃34;效果

1 个答案: