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

What is the H5 tag in HTML?May 09, 2025 am 12:11 AM

The H5 tag in HTML is a fifth-level title that is used to tag smaller titles or sub-titles. 1) The H5 tag helps refine content hierarchy and improve readability and SEO. 2) Combined with CSS, you can customize the style to enhance the visual effect. 3) Use H5 tags reasonably to avoid abuse and ensure the logical content structure.

H5 Code: A Beginner's Guide to Web StructureMay 08, 2025 am 12:15 AM

The methods of building a website in HTML5 include: 1. Use semantic tags to define the web page structure, such as, , etc.; 2. Embed multimedia content, use and tags; 3. Apply advanced functions such as form verification and local storage. Through these steps, you can create a modern web page with clear structure and rich features.

H5 Code Structure: Organizing Content for ReadabilityMay 07, 2025 am 12:06 AM

A reasonable H5 code structure allows the page to stand out among a lot of content. 1) Use semantic labels such as, etc. to organize content to make the structure clear. 2) Control the rendering effect of pages on different devices through CSS layout such as Flexbox or Grid. 3) Implement responsive design to ensure that the page adapts to different screen sizes.

H5 vs. Older HTML Versions: A ComparisonMay 06, 2025 am 12:09 AM

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

H5 vs. HTML5: Clarifying the Terminology and RelationshipMay 05, 2025 am 12:02 AM

The difference between H5 and HTML5 is: 1) HTML5 is a web page standard that defines structure and content; 2) H5 is a mobile web application based on HTML5, suitable for rapid development and marketing.

HTML5 Features: The Core of H5May 04, 2025 am 12:05 AM

The core features of HTML5 include semantic tags, multimedia support, form enhancement, offline storage and local storage. 1. Semantic tags such as, improve code readability and SEO effect. 2. Multimedia support simplifies the process of embedding media content through and tags. 3. Form Enhancement introduces new input types and verification properties, simplifying form development. 4. Offline storage and local storage improve web page performance and user experience through ApplicationCache and localStorage.

H5: Exploring the Latest Version of HTMLMay 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AM

Advanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?

3 weeks agoByDDD

Nordhold: Fusion System, Explained

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Blue Prince: How To Get To The Basement

1 months agoByDDD

Hot Tools

Atom editor mac version download

The most popular open source editor

SublimeText3 Linux new version

SublimeText3 Linux latest version

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

SublimeText3 English version

Recommended: Win version, supports code prompts!

Hot Topics

1664

1423

1318

1269

1248