canvas 图像合成

最新推荐文章于 2022-03-12 18:45:28 发布

doubleicon

最新推荐文章于 2022-03-12 18:45:28 发布

阅读量1k

点赞数

分类专栏： html 文章标签： canvas globalCompositeOpera canvas globalAlpha

本文链接：https://blog.csdn.net/u011872945/article/details/37882735

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

globalAlpha

globalAlpha 属性设置或返回绘图的当前透明值（alpha 或 transparency）。

globalAlpha 属性值必须是介于 0.0（完全透明）与 1.0（不透明）之间的数字。

语法：context.globalAlpha=number;

number介于0到1之间，0 完全透明，1 不透明

globalCompositeOperation

globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上（即所绘制的两个图像重叠式怎么处理）。

源图像 = 您打算放置到画布上的绘图。

目标图像 = 您已经放置在画布上的绘图。

语法：context.globalCompositeOperation="source-in";

参数说明：

<span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="script/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function () {


            var canvas = document.getElementById("sourceover");
            var context = canvas.getContext("2d");
           
            context.save();
            context.fillStyle = "blue";
            context.globalAlpha = 0.7;
            context.fillRect(0, 0, 100, 100);
            context.globalCompositeOperation = "source-atop";
            context.fillStyle = "red";
            context.fillRect(40, 40, 100, 100);
            context.restore();

            context.save();
            context.fillStyle = "blue";
            context.fillRect(150, 0, 100, 100);
            context.globalCompositeOperation = "source-over";
            context.fillStyle = "red";
            context.fillRect(190, 40, 100, 100);
            context.restore();
        });
    </script>
</head>
<body>
    <canvas id="sourceover" width="600" height="600" style="border:1px solid blue;" ></canvas>
</body>
</html>
</span>