gpt4 book ai didi

javascript - 将不透明的图像绘制到 Canvas 上

转载 作者:太空狗 更新时间:2023-10-29 13:35:07 25 4
gpt4 key购买 nike

<分区>

我有一张图片。我使用 drawImage() 将其绘制到 Canvas 上。

我的问题是:如果图像的不透明度为 0.4,我如何以相同的不透明度将其绘制到 Canvas 上。

我创建了一个示例 Fiddle here .我如何将 #scream 绘制到 mycanvas 上并在图像上保持 0.4 的不透明度。

html:

<p>Image with 0.4 opacity to be used:</p>
<img id="scream" width="200" height="200" src="http://img42.com/NMMU8+">

<p>Canvas:</p>
<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
</canvas>

CSS:

#scream{
opacity: 0.4;
}
#myCanvas{
background-color: #f60;
}

js:

window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com