zoukankan      html  css  js  c++  java
  • canvas 利用canvas中的globalCompositeOperation 绘制刮奖 效果

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
            body {
                height: 1000px;
            }
        </style>
    
    </head>
    <body>
        <div style="position: relative;  300px; height: 100px;">
            <canvas id="rect" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>
            <canvas id="arc" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>
        </div>
        <script type="text/javascript">
            function WipeImg(rect, arc) {
                var canvas = document.getElementById(rect);
                var context = canvas.getContext("2d");
                var img = new Image();
                img.onload = function () {
                    context.drawImage(this, 0, 0, canvas.width, canvas.height);//将图片放置画布上
                }
                img.src = '../js_面向对象/image/bdlogo.gif';//图片地址
                var canvas2 = document.getElementById(arc);
                var context2 = canvas2.getContext("2d");
                context2.fillStyle = "#ccc";
                context2.fillRect(0, 0, 300, 100);
                context2.fill();
                context2.globalCompositeOperation = "destination-out";//源图像是透明的,目标图像部分被显示出来
                var isMousedown = false;
                canvas2.addEventListener("mousedown", function (e) {
                    isMousedown = true;
                    var docEle = document.documentElement;
                    var x = (e.clientX) ;+ docEle.scrollLeft - docEle.clientLeft;
                    var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;
                    //可以利用createRadialGradient给定指定值去画渐变效果
                    //var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);
                    //radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');
                    //radgrad.addColorStop(1, 'rgba(255,255,255,0)');
                    //context2.fillStyle = radgrad;
                    context2.fillStyle = "#fff";
                    context2.beginPath();
                    context2.arc(x, y, 30, 0, Math.PI * 2, true);
                    context2.closePath();
                    context2.fill();
                    canvas2.addEventListener("mousemove", function (e) {
                        if (!isMousedown) return false;
                        var docEle = document.documentElement;
                        var x = (e.clientX)  + docEle.scrollLeft - docEle.clientLeft;
                        var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;
                        var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);
                        radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');
                        radgrad.addColorStop(1, 'rgba(255,255,255,0)');
                        context2.fillStyle = radgrad;
                        context2.beginPath();
                        context2.arc(x, y, 30, 0, Math.PI * 2, true);
                        context2.closePath();
                        context2.fill();
                    }, false);
                    canvas2.addEventListener("mouseup", function (e) {
                        isMousedown = false;
                    }, false);
                }, false);
            }
            WipeImg("rect", "arc");
        </script>
    </body>
    </html>
        
    

      

  • 相关阅读:
    Java vs Python
    Compiled Language vs Scripting Language
    445. Add Two Numbers II
    213. House Robber II
    198. House Robber
    276. Paint Fence
    77. Combinations
    54. Spiral Matrix
    82. Remove Duplicates from Sorted List II
    80. Remove Duplicates from Sorted Array II
  • 原文地址:https://www.cnblogs.com/LLJ748211490/p/globalCompositeOperation.html
Copyright © 2011-2022 走看看