我可以更改画布上图像对象的样式属性吗？答案

【问题标题】：Can I change style attribute of an image object on canvas?我可以更改画布上图像对象的样式属性吗？
【发布时间】：2021-05-27 11:55:09
【问题描述】：

我在画布drawimage() 上添加了 2 张图像，我想通过使用 setAttribute ('class','multiply') 混合图像来混合这 2 张图像以保存，但它不起作用。

混合混合模式：乘法；

添加了 2 张图片：

我想混合乘法：

【问题讨论】：

你好。如果您需要帮助，请展示您尝试过的更多代码。

标签： jquery image canvas styles

【解决方案1】：

mix-blend-mode 是 CSS 属性。 CSS 仅影响 HTML 和 SVG 元素等 DOM 节点，不影响画布绘制操作。 drawImage 将图像的像素放置在画布上，但不保留对实际图像或其属性（如类）的引用。要在画布上乘以像素，您可以使用globalCompositeOperation。

ctx.drawImage(image1, 0, 0);
ctx.globalCompositeOperation = "multiply";
ctx.drawImage(image2, 0, 0);

【讨论】：

我试过这个：ctx.globalCompositeOperation = "multiply" 但它不适合我。我必须创建 2 个画布（作为 2 个图层）并将前向画布的样式设置为“乘”：#canvas{mix-blend-mode: multiply;z-index: 1;} 现在可以混合了。但是混合为一个文件后我无法保存图像。
ctx.globalCompositeOperation = "打火机"; //工作 - 使图像更亮。但是 ctx.globalCompositeOperation = "multiply"; //不起作用
ctx.globalCompositeOperation = "multiply"; //似乎只适用于形状，图像对象不是
在绘制第二张图像之前，我已经用 ctx.globalCompositeOperation = "multiply" 解决了这个问题。太感谢了！