canvas笔记-globalAlpha和globaleCompositeOperation的使用- 前端开发

如下代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>
 
<script>
 
    window.onload = function(){
 
        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
 
        for(let i = 0; i < 100; i++){
 
            let R = Math.floor(Math.random() * 255);
            let G = Math.floor(Math.random() * 255);
            let B = Math.floor(Math.random() * 255);
 
            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
            context.beginPath();
            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);
            context.fill();
        }
    }
 
</script>
 
 
</body>
</html>

程序运行截图如下：

修改脚本添加globalAlpha属性后，代码如下：


<script>
 
    window.onload = function(){
 
        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
        context.globalAlpha = 0.5;
 
        for(let i = 0; i < 100; i++){
 
            let R = Math.floor(Math.random() * 255);
            let G = Math.floor(Math.random() * 255);
            let B = Math.floor(Math.random() * 255);
 
            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";
            context.beginPath();
            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, 2 * Math.PI);
            context.fill();
        }
    }
 
</script>

程序运行截图如下：

globalAlpha会将所有元素的透明的进行更改。

下一个是globalCompositeOperation顾名思义就是整体图形复合时的操作，保证哪个在上面，哪个在下面，哪个需要裁剪，哪个要隐藏等等。

其属性值如下：

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	在源图像上显示目标图像。
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合

所有属性值对应的效果图是这样的。

下面来一个简单的小栗子

程序运行截图如下：

源码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>
 
<script>
 
    window.onload = function(){
 
        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
 
        context.globalCompositeOperation = "source-over";
        context.fillStyle = "red";
        context.fillRect(20, 20, 75, 50);
        context.fillStyle = "blue";
        context.fillRect(50, 50, 75, 50);
 
        context.globalCompositeOperation = "destination-over";
        context.fillStyle = "red";
        context.fillRect(150, 20, 75, 50);
        context.fillStyle = "blue";
        context.fillRect(180, 50, 75, 50);
    }
 
</script>
 
</body>
</html>

关键词搜索

canvas笔记-globalAlpha和globaleCompositeOperation的使用

详情内容

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式