使用Canvas创作一个刮刮乐效果

最新推荐文章于 2024-08-18 20:11:48 发布

閊行

最新推荐文章于 2024-08-18 20:11:48 发布

阅读量407

点赞数

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/gq1050878698/article/details/122548915

版权

 <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #canv {
            background: url('../img/1.10日图片1.jpg');
            border: 1px solid black;
            /* margin-left: 300px; */
        }
    </style>

<canvas id="canv" width="1000" height="750"></canvas>

<script>
    var canv = document.querySelector("#canv")
    var ctx = canv.getContext('2d');
// 刮刮乐 
    // 注意刮刮乐效果需要配合服务器状态

    // 1. 在图片上加一次矩形遮罩层、
    ctx.beginPath();
    ctx.fillStyle = '#666';
    ctx.fillRect(0, 0, 1000, 750);
    ctx.globalCompositeOperation = 'destination-out';

    // 2.鼠标移动清空画布

    canv.onmousedown = function() {
        console.log(111);
        // 创建一个圆形
        ctx.beginPath();
        ctx.arc(event.clientX, event.clientY, 100, 0, 2 * Math.PI);
        ctx.fill();

        // 3.刮够60%直接让