gpt4 book ai didi

javascript - 如何用html5 canvas元素绘制透明图片

转载 作者:技术小花猫 更新时间:2023-10-29 12:29:23 27 4
gpt4 key购买 nike

我的目标是谷歌浏览器。是否可以在 Canvas 上绘制透明图像?我所说的透明是指以 50% 的不透明度绘制整个图像。

最佳答案

您可以使用 globalAlpha 属性来执行此操作,如下所示:

<!DOCTYPE HTML>
<html>
<body>
<canvas height="100" width="100" id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.5;
var myImage = new Image();
myImage.src = "someImage.jpg";
myImage.onload = function()
{
context.drawImage(myImage, 0, 0, 100, 100);
};
</script>
</body>
</html>

是的,它确实适用于图像。在 Win 7 上通过 IE 9、FF 5、Safari 5 和 Chrome 12 验证。

关于javascript - 如何用html5 canvas元素绘制透明图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2916938/

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