当前位置： 文江博客话题详情

如何用html5 canvas元素绘制透明图像

发布于 2024-09-03 02:45:34 字数 61 浏览 4 评论 0原文

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

原文

I am targeting google chrome. Is it possible to draw transparent images on a canvas? By transparent I mean the drawing the entire image at something like 50% opacity.

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

扫码二维码加入Web技术交流群

发布评论

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

评论（3）

葬心 2024-09-10 02:45:34

您可以使用 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 进行验证。

You can do this using the globalAlpha property, like this:

<!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>

And yes, it does work with images. Verified with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.

回复 原文
那伤。 2024-09-10 02:45:34

canvas 元素具有全局 alpha 属性，可让您对绘制的任何内容应用部分透明度。

The canvas element has a global alpha attribute that lets you apply partial transparency to anything you draw.

回复 原文
自我难过 2024-09-10 02:45:34

如果您迭代画布的图像数据并手动设置 alpha 值，然后使用 canvas.toDataURL 方法导出透明图像并将其插入到另一个画布中，这是可能的。

It's possible if you iterate thru the canvas' image-data and set the alpha value manually, then export the transparent image with the canvas.toDataURL method and insert it into another canvas.

回复 原文
~没有更多了~

关于作者

婴鹅

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

留蓝

文章 0 评论 0

18790681156

文章 0 评论 0

zach7772

文章 0 评论 0

Wini

文章 0 评论 0

ayeshaaroy

文章 0 评论 0

初雪

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文