如何在html5画布上放置重叠图像？
塞浦路斯
我想做一个很酷的可视化，在我的画布上重叠很多半透明的图像。为此，我决定使用，context.putImageData()因为这些图像存储为数组。问题是这种方法忽略了画布与已经绘制的图像的实际背景，并计算了相对于白色背景的透明度。
这是显示当前行为的片段：
<!DOCTYPE html>
<html>
<body>
<canvas id='cvs' width='100' height='100'></canvas>
</body>
<script>
const size = 50
const context = document.getElementById('cvs').getContext('2d');
const redSquare = context.createImageData(size, size);
for (let i=0; i<size*size*4; i=i+4) {
redSquare.data[i] = 255;
redSquare.data[i + 3] = 255; // 1.0 opacity rbga(1, 0, 0, 1)
}
context.putImageData(redSquare, 10, 10);
const trasparentBlackSquare = context.createImageData(size, size);
for (let i=0; i<size*size*4; i=i+4) {
trasparentBlackSquare.data[i + 3] = 100; // 0.4 opacity rbga(0, 0, 0, 0.4)
}
context.putImageData(trasparentBlackSquare, 30, 30);
</script>
</html>
其结果是这样的：
。
但是，我希望它看起来像这样： 
我用两个不同的重叠画布生成了这个图像，这不适合我的问题。
请让我知道是否有任何解决此问题的方法。
霍沃思
如果您将图像写入“工作区”画布，您可以浏览图像数据，更改不透明度，就像您对黑色方块所做的一样。然后将其写回工作区画布。然后，您可以使用 drawImage 将其写入主画布。
这是我在我的服务器上尝试过的，显然你必须放入一个合适的 img src 以避免 CORS 问题。并且还使 img 和工作区元素可见：隐藏 - 我让它们可见以显示正在发生的事情。
<!DOCTYPE html>
<html>
<body>
img
<img id="img" src="https://rgspaces.org.uk/wp-content/uploads/may-morning-in-lockdown-100x100.jpg"/>
cvs
<canvas id='cvs' width='100' height='100'></canvas>
workspace
<canvas id='workspace' width='100' height='100' style="visibility:visible;"></canvas>
</body>
<script>
window.onload=init;
function init() {
const size = 50
const cvs = document.getElementById('cvs')
const context = cvs.getContext('2d');
const workspace= document.getElementById('workspace')
const workspacectx=workspace.getContext('2d');
const img=document.getElementById('img');
context.fillStyle = 'rgb(255,0,0,1)';
context.fillRect(10, 10, size, size);
workspacectx.drawImage(img,20,20,size,size);
imgdata=workspacectx.getImageData(20, 20, size, size);
for (var i=0;i<size*size*4;i+=4) {
imgdata.data[i+3]=150;//if it already has an opacity 0 you would leave it
}
workspacectx.putImageData(imgdata,20,20);
context.drawImage(workspace,20,20);
}
</script>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
计算数据帧R中的字符串频率
- 2
Android Studio Kotlin：提取为常量
- 3
Excel 2016图表将增长与4个参数进行比较
- 4
获取并汇总所有关联的数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 7
将加号/减号添加到jQuery菜单
- 8
算术中的c ++常量类型转换
- 9
TYPO3：将 Formhandler 添加到新闻扩展
- 10
TreeMap中的自定义排序
- 11
如何开始为Ubuntu开发
- 12
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 13
无法使用 envoy 访问 .ssh/config
- 14
在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？
- 15
遍历元素数组以每X秒在浏览器上显示
- 16
在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过
- 17
警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？
- 18
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 19
如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）
- 20
尝试在Dell XPS13 9360上安装Windows 7时出错
- 21
如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称
我来说两句