Take you to understand the globalCompositeOperation attribute in canvas-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Take you to understand the globalCompositeOperation attribute in canvas

青灯夜游

Apr 25, 2021 am 11:57 AM

canvasjavascript

This article will take you to learn more about the globalCompositeOperation attribute in canvas, and see the magical effect of this attribute through code examples. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Take you to understand the globalCompositeOperation attribute in canvas

Explanation

The first to know the globalCompositeOperation property of canvas is when needed When implementing a scratch card effect, I just found the scratch card effect online and quickly completed the task. This time I studied it again, hoping to deepen my understanding.

Let’s first look at the globalCompositeOperation attribute of canvas and what it does specifically.

Definition

globalCompositeOperation property sets or returns how to draw a source (new) image to the target (existing) on the image.
Source image = the drawing you intend to place on the canvas.
target image = the drawing you have placed on the canvas.

This property is used to set the type of composition operation to be applied when drawing a new shape. For example, if you draw a red circle on a blue rectangle, will red appear on top or blue? The color is displayed on the top, whether the overlapping parts are displayed or not, how to display the non-overlapping parts, and other situations. When facing these situations, it is time for the globalCompositeOperation attribute to take effect.
Under the default value, they are all displayed, and the newly drawn graphics will overwrite the original graphics.

Usage

Default value: source-over
Syntax: context.globalCompositeOperation=" source-in";

The blue rectangle in the table is the target image, and the red circle is the source image.

##source-overdefault. Display the source image over the destination image. source-atopDisplays the source image on top of the destination image. The parts of the source image that lie outside the target image are invisible. source-inDisplays the source image within the target image. Only the portion of the source image within the destination image is displayed; the destination image is transparent. source-outDisplay the source image in addition to the target image. Only the portion of the source image other than the target image will be displayed, and the target image will be transparent. destination-overDisplays the destination image above the source image. destination-atopDisplays the destination image on top of the source image. Portions of the target image outside the source image will not be displayed. destination-inDisplays the destination image within the source image. Only the portion of the target image within the source image will be displayed; the source image is transparent. destination-outDisplays the destination image outside the source image. Only the portion of the target image outside the source image is displayed; the source image is transparent. lighterDisplay source image target image. copyDisplay source image. Ignore the target image. xorCombines the source and destination images using an XOR operation.

Okay, let’s realize the effect of water droplet diffusion:

https://codepen.io/FEWY/pen/oPxbmj

Rendering

Implementation ideas

First draw a black and white picture on a canvas, and then set the background to Colored pictures, when the mouse clicks, set the globalCompositeOperation attribute value of the canvas to destination-out, and use an irregular shape to gradually increase according to the coordinates of the mouse in the canvas. Erase the black and white pictures and slowly display the colored background.

That is to say, we need three pictures

Black and white pictures

Take you to understand the globalCompositeOperation attribute in canvas

Colored pictures

Take you to understand the globalCompositeOperation attribute in canvas

Irregular shaped pictures

Take you to understand the globalCompositeOperation attribute in canvas

Code

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            /* 设置鼠标的光标是一张图片， 16和22 分别表示热点的X坐标和Y坐标 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor/url */
            cursor: url(&#39;https://www.kkkk1000.com/images/globalCompositeOperation/mouse.png&#39;) 16 22, auto;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="400px" height="250px"></canvas>

    <script type="text/javascript"> 
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        // 保存图片路径的数组
        var urlArr = ["https://www.kkkk1000.com/images/globalCompositeOperation/bg2.png", "https://www.kkkk1000.com/images/globalCompositeOperation/clear.png"];
        // imgArr 保存加载后的图片的数组，imgArr中保存的是真实的图片
        // loadImg 函数用来加载 urlArr 中所有的图片
        // 并返回一个保存所有图片的数组
        var imgArr = loadImg(urlArr);
        // flag 用来限制 点击事件，一张图片只会产生一次效果
        var flag = false;
 

        function loadImg(urlArr) {
            var index = 0;
            var res = [];
            // 每次给 load 函数传入一个图片路径，来加载图片
            load(urlArr[index]);
            function load(url) {
                // 如果 index 等于 urlArr.length，
                // 表示加载完 全部图片了，就结束 load函数
                if (index == urlArr.length) {
                    // 加载完全部图片，调用 init 函数
                    init();
                    return;
                }

                var img = new Image();
                img.src = url;
                // 不管当前图片是否加载成功，都要加载下一张图片
                img.onload = next;
                img.onerror = function () {
                    console.log(res[index] + "加载失败");
                    next();
                }
                // next 用来加载下一张图片
                function next() {
                    // 把加载后的图片，保存到 res 中
                    res[index] = img;
                    load(urlArr[++index])
                }
            }
            // 最后返回保存所有真实图片的数组
            return res;
        }

        function init() {
            // 先在canvas上画黑白的图片，然后再设置背景是彩色的图片
            // 避免先显示出彩色图片，再显示出黑白的图片
            context.globalCompositeOperation = "source-over";
            context.drawImage(imgArr[0], 0, 0, 400, 250);
            canvas.style.background = &#39;url(https://www.kkkk1000.com/images/globalCompositeOperation/bg.jpg)&#39;;
            canvas.style.backgroundSize = "100% 100%";

            // flag 是 true 时，鼠标点击才有水滴扩散的效果
            flag = true;
            // canvas 绑定点击事件，点击时产生水滴扩散效果
            canvas.onclick =  diffusion;
        }

        // width 表示 不规则形状的图片的尺寸
        var width = 0;
        // speed 表示扩散效果的速度
        var speed = 8;
        // diffusion 函数根据鼠标坐标，产生效果
        function  diffusion (e) {
            if (flag) {
                flag = false;
                context.globalCompositeOperation = "destination-out";
                window.requestAnimationFrame(draw);
                // 根据鼠标坐标，画扩散效果
                function draw() {
                    // 这里不一定需要是 1800 ，但必须是一个足够大的数，可以扩散出整张背景图
                    if (width > 1800) {
                        flag = true;
                        return;
                    }
                    width += speed;
                    // 获取鼠标相对于 canvas 的坐标
                    var x = e.layerX;
                    var y = e.layerY;

                    // 画不规则形状的图片，逐渐增大图片尺寸
                    context.drawImage(imgArr[1], x - (width / 2), y - (width / 2), width, width);
                    window.requestAnimationFrame(draw);
                }
            }
        }
    </script>
</body>

</html>

Let’s continue to realize the effect of a scratch card

Rendering

Take you to understand the globalCompositeOperation attribute in canvas

## The idea of implementing the scratch card effect:

First draw a layer of gray on a canvas, then set the background image of the canvas, and set the

globalCompositeOperation attribute value of the canvas to destination -out, when clicked and moved, the gray will be erased according to the coordinates of the moving point. When a part is erased, all the gray will be automatically erased and the background will be displayed.

The scratch card effect and the water drop diffusion effect are almost the same at the beginning, but the water drop diffusion effect uses an irregularly shaped picture to clear black and white pictures, while the scratch card The effect is to clear the gray above by drawing lines, which are thicker.

The main difference is that the scratch card effect needs to automatically erase all the gray at the end. There are two ways.

The first one

Use the

getImageData method of canvas to obtain the pixel information on the canvas. The data attribute of the object returned by this method is A one-dimensional array containing data in RGBA order. The data is represented by integers from 0 to 255 (inclusive). For details, please see Pixel Operation of canvas. Use this method to determine how much has been erased, that is, use a variable to record how many pixels the RGBA value is 0. When the value of the variable exceeds a certain value, all grays are cleared.

The code is here:
https://codepen.io/FEWY/pen/BOjmyg

Second type

Just look at how much it has moved. When the mouse moves, a variable will be incremented. When this variable exceeds a certain value, all gray will be erased.

Code here
https://codepen.io/FEWY/pen/eLJeNv

Note: The first way to use
getImageData has cross-domain problems, but because in this effect, the picture is not drawn on the canvas, but the background of the canvas is set to a picture, so this There is no impact yet, but if other pictures are drawn on the canvas, cross-domain issues may need to be dealt with. Use getImageData to get the pixel information on the canvas, and you can decide the timing of erasing all gray based on the gray area on the scratch card, which is more flexible.

The second method, although there is no cross-domain problem, cannot control the final timing of erasing all gray based on the gray area on the scratch card.

Summary

The effect in the article is mainly to use

globalCompositeOperationThe attribute value is destination-out, and when the value is other values, Various effects can also be produced. You can also use your imagination to try other values, and you may make new discoveries.

For more programming-related knowledge, please visit:

Introduction to Programming! !

Attribute value	Description	Effect

The above is the detailed content of Take you to understand the globalCompositeOperation attribute in canvas. For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete

H5: The Evolution of Web Standards and TechnologiesApr 15, 2025 am 12:12 AM

Web standards and technologies have evolved from HTML4, CSS2 and simple JavaScript to date and have undergone significant developments. 1) HTML5 introduces APIs such as Canvas and WebStorage, which enhances the complexity and interactivity of web applications. 2) CSS3 adds animation and transition functions to make the page more effective. 3) JavaScript improves development efficiency and code readability through modern syntax of Node.js and ES6, such as arrow functions and classes. These changes have promoted the development of performance optimization and best practices of web applications.

Is H5 a Shorthand for HTML5? Exploring the DetailsApr 14, 2025 am 12:05 AM

H5 is not just the abbreviation of HTML5, it represents a wider modern web development technology ecosystem: 1. H5 includes HTML5, CSS3, JavaScript and related APIs and technologies; 2. It provides a richer, interactive and smooth user experience, and can run seamlessly on multiple devices; 3. Using the H5 technology stack, you can create responsive web pages and complex interactive functions.

H5 and HTML5: Commonly Used Terms in Web DevelopmentApr 13, 2025 am 12:01 AM

H5 and HTML5 refer to the same thing, namely HTML5. HTML5 is the fifth version of HTML, bringing new features such as semantic tags, multimedia support, canvas and graphics, offline storage and local storage, improving the expressiveness and interactivity of web pages.

What Does H5 Refer To? Exploring the ContextApr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5: Tools, Frameworks, and Best PracticesApr 11, 2025 am 12:11 AM

The tools and frameworks that need to be mastered in H5 development include Vue.js, React and Webpack. 1.Vue.js is suitable for building user interfaces and supports component development. 2.React optimizes page rendering through virtual DOM, suitable for complex applications. 3.Webpack is used for module packaging and optimize resource loading.

The Legacy of HTML5: Understanding H5 in the PresentApr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5 Code: Accessibility and Semantic HTMLApr 09, 2025 am 12:05 AM

H5 improves web page accessibility and SEO effects through semantic elements and ARIA attributes. 1. Use, etc. to organize the content structure and improve SEO. 2. ARIA attributes such as aria-label enhance accessibility, and assistive technology users can use web pages smoothly.

Is h5 same as HTML5?Apr 08, 2025 am 12:16 AM

"h5" and "HTML5" are the same in most cases, but they may have different meanings in certain specific scenarios. 1. "HTML5" is a W3C-defined standard that contains new tags and APIs. 2. "h5" is usually the abbreviation of HTML5, but in mobile development, it may refer to a framework based on HTML5. Understanding these differences helps to use these terms accurately in your project.

See all articles