Canvas globalAlpha 不影响图像？

发布于 2024-12-28 11:10:25 字数 208 浏览 3 评论 0原文

我试图使用 putImageData() 将一系列图像放在画布上，但上下文的 globalAlpha 属性似乎没有效果。然而，它与drawImage()一起使用。这就是它应该如何工作的吗？

该片段不起作用：

cx.globalAlpha = 0.1;
cx.putImageData(imagesData[index], 0, 0);

原文

I'm trying to put series of images on the canvas with putImageData(), but the globalAlpha property of the context doesn't seem to have an effect. However, it's working with drawImage(). Is that how it's supposed to work?

That snippet doesn't work:

cx.globalAlpha = 0.1;
cx.putImageData(imagesData[index], 0, 0);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我一直都在从未离去 2025-01-04 11:10:25

不，putImageData 放置来自 imageData 的纯净、原始的像素，覆盖那里的任何像素。

从规格来看：

当前路径、变换矩阵、阴影属性、全局 Alpha、剪切区域和全局合成运算符不得影响 getImageData() 和 putImageData() 方法.

回复收藏 0 原文

三五鸿雁 2025-01-04 11:10:25

您可以将图像作为图案，绘制路径并填充它。

var img=document.getElementById("myImg")
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var pat=ctx.createPattern(img,'repeat');

ctx.globalAlpha=0.2;

ctx.fillStyle=pat;
ctx.beginPath(); ctx.rect(0,0,175,150); ctx.fill(); ctx.closePath();

ctx.globalAlpha=0.9;

ctx.beginPath(); ctx.rect(50,50,75,50); ctx.fill(); ctx.closePath();

You can make the image a pattern, draw a path and fill it.

var img=document.getElementById("myImg")
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var pat=ctx.createPattern(img,'repeat');

ctx.globalAlpha=0.2;

ctx.fillStyle=pat;
ctx.beginPath(); ctx.rect(0,0,175,150); ctx.fill(); ctx.closePath();

ctx.globalAlpha=0.9;

ctx.beginPath(); ctx.rect(50,50,75,50); ctx.fill(); ctx.closePath();

回复收藏 0 原文

~没有更多了~