HTML5 Canvas 绘图方法整理【十七、Canvas透明度 / 图形叠加、层次、冲突】

最新推荐文章于 2025-01-21 15:03:36 发布

原创

最新推荐文章于 2025-01-21 15:03:36 发布 · 7.2k 阅读

16 ·

CC 4.0 BY-SA版权

Canvas 设置透明度：
语法： ctx.globalAlpha= 属性值;
属性值是 0 - 1之间的数字。同CSS一样的透明度属性值

不过fillStyle 或 strokeStyle 本身也可以自己设定透明值，所以用到globalAlpha 并不多，

不过还是了解下，谁知道哪天会有什么反人类的要求会用到呢 (。・・)ノ

    <script>
    window.onload=function () {
    
    
        let cans = document.getElementById("myCanvas");
        let ctx = cans.getContext("2d");

        let text="要显示的字符串文本";
        ctx.font="bold 25px KaiTi";
        ctx.fillStyle="#7C0DFA";
        ctx.fillText(text,