HTML5_图片合成_刮刮卡

刮刮卡（图片合成）

定义： globalCompositeOperation 属性，设置或返回如何将源图像

将 myCanvas 的背景图设置为一张图片，（刮开后显示）

// 目标图像（已有的，外面一层即将被刮掉的那一图像）

pen.beginPath();

pen.fillStyle = "red";

pen.fillRect(100, 300, 100, 100);

// pen.globalCompositeOperation = "source-over"; / / 默认值，可以理解为目标图像层级高于源图像

// pen.globalCompositeOperation = "source-atop"; // 目标图像以外的源图像是透明的

// pen.globalCompositeOperation = "source-in"; // 只有目标图像以内的源图像显示，其他部分图像是透明的

// pen.globalCompositeOperation = "source-out"; // 只有目标图像以外的源图像显示，其他部分图像是透明的

// pen.globalCompositeOperation = "destination-over"; // 默认值，可以理解为源图像层级高于目标图像

// pen.globalCompositeOperation = "destination-atop"; // 源图像以外的目标图像是透明的

// pen.globalCompositeOperation = "destination-in"; // 只有源图像以内的目标图像显示，其他部分图像是透明的

pen.globalCompositeOperation = "destination-out"; // 只有源图像以外的目标图像显示，其他部分图像是透明的

// 源图像（刮刮卡必须设置透明色，才能看见 myCanvas 的背景图）

pen.beginPath();

pen.fillStyle = "blue";

pen.fillRect(300, 300, 100, 100);

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>刮刮卡案例</title>

        <style type="text/css">

            body {

                width: 100%;

                color: #000;

                background: #96b377;

                font: 14px Helvetica, Arial, sans-serif;

            }

            #wrap {

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            }

        </style>

    </head>

    <body>

        <div id="wrap"></div>

        <!-- javascript 代码 -->

        <script type="text/javascript">

            //                创建 画布的width  画布的height  背景颜色 父元素

            function createCanvasTo(canvasWidth, canvasHeight, bgColor, parentObj){

                var myCanvas = document.createElement("canvas");

                myCanvas.width = canvasWidth;

                myCanvas.height = canvasHeight;

                myCanvas.innerText = " 您的浏览器不支持 canvas，建议更新或者更换浏览器。";

                if(bgColor){

                    myCanvas.style.backgroundColor = bgColor;

                };

                if(parentObj){

                    parentObj.appendChild(myCanvas);

                };

                return myCanvas;

            };

            /**** Start Coding ****/

            var wrap = document.getElementById("wrap");

            var myCanvas = createCanvasTo(400, 400, "#eee", wrap);

            myCanvas.style.backgroundImage = "url(./img/Loki.jpg)";

            myCanvas.style.backgroundSize = "cover";

            // 获取画笔

            var pen = myCanvas.getContext("2d");

            pen.fillStyle = '#a0a997';    // 填充的颜色

            pen.strokeStyle = "blue";    //  笔的颜色

            pen.lineWidth = 40;    // 笔宽

            pen.lineCap = "round";    // 圆形结束

            pen.lineJoin = "round";    // 圆角

            // 开始绘制

            pen.beginPath();

            pen.fillRect(0, 0, myCanvas.width, myCanvas.height);

            pen.globalCompositeOperation = "destination-out";       // 只有源图像以外的目标图像显示，其他部分图像是透明的

            myCanvas.onmousedown = function(e){

                e = e || window.event;

                myCanvas.setCapture && myCanvas.setCapture();

                var canvasX = myCanvas.getBoundingClientRect().left;

                var canvasY = myCanvas.getBoundingClientRect().top;

                pen.beginPath();

                pen.moveTo(e.clientX-canvasX, e.clientY-canvasY);

                myCanvas.onmousemove = function(e){

                    e = e || window.event;

                    pen.lineTo(e.clientX-canvasX, e.clientY-canvasY);

                    pen.stroke();

                };

                myCanvas.onmouseup = function(){

                    myCanvas.onmousemove = null;

                    myCanvas.onmouseup = null;

                    myCanvas.clearCapture && myCanvas.clearCapture();

                };

                e.preventDefault && e.preventDefault();

                return false;

            };

        </script>

    </body>

</html>

Pen

HTML5_图片合成_刮刮卡