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>
        
    

      

  • 相关阅读:
    kettle在linux下执行任务
    activemq spring 集成与测试
    mysql创建存储过程,定时任务,定时删除log
    dubbo-admin 无法支持JDK1.8
    自定义事件驱动加异步执行
    AOP 实现自定义注解
    mybatis-plus的学习
    阿里巴巴架构师的成长之路
    Redis错误:jedis.exceptions.JedisDataException: ERR Client sent AUTH, but no password is set
    freemark基础知识
  • 原文地址:https://www.cnblogs.com/LLJ748211490/p/globalCompositeOperation.html
Copyright © 2011-2022 走看看