念念不忘
必有回响

利用canvas画布实现刮刮乐抽奖效果

今天学了canvas画布,看到刮刮乐抽奖效果挺有意思的,鼠标涂抹底部照片会逐渐显示出来,参照案例顺便发出来回顾一下。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    canvas {
        border: 1px solid #000;
        background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556549627988&di=adc7b53102f637804b8d6e212451d12b&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2F40e7c1ba8a3665587b5ef5391ada3375.jpeg) no-repeat;
        background-size:cover; 
    }
    </style>
</head>
<body>
    <canvas width="600" height="400"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d"); //创建一个2d画布

    // 创建一个img标签
    var image = new Image()


    // 设置图片的路径
    // image.src = 'images/baby1.jpg'

    ctx.fillStyle = "#ccc"; //设置灰色图罩层以及图罩层大小
    ctx.fillRect(0, 0, canvas.width, canvas.height)


    // 鼠标按下,注册鼠标事件监听
    canvas.onmousedown = function(){
        canvas.onmousemove = function(e){
            // 核心代码(掏空)透明,图像合成,最外层图像会被显示
            ctx.globalCompositeOperation = 'destination-out'

            ctx.beginPath();
            //设置鼠标涂抹区域半径为30px的一个圆形
            ctx.arc(e.offsetX, e.offsetY, 30, 0, 6.28, false);
            ctx.fillStyle = '#000';
            ctx.fill()
        }
    }

    // 鼠标抬起,取消鼠标移动事件
    canvas.onmouseup = function(){
        canvas.onmousemove = null;
    }
</script>
</html>

实现效果:点我就能看到哦

赞(1) 打赏
未经允许不得转载:小蚁上树 » 利用canvas画布实现刮刮乐抽奖效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址