canvas实现刮刮乐

最新推荐文章于 2023-01-01 21:06:30 发布

冲冲冲冲fyx

最新推荐文章于 2023-01-01 21:06:30 发布

阅读量123

点赞数

文章标签： canvas js

本文链接：https://blog.csdn.net/mengniumeiwoniu/article/details/117637800

版权


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            box-shadow: 0 0 10px #333;
            position: fixed;
            top: 0;
            left: 0;
            /* bottom: 0;
            right: 0; */
            /* margin: 50px auto; */
          }
    </style>
</head>
<body onload="draw()">
    <img src="./u=3225163326,3627210682&fm=26&gp=0.jpg" alt="">
    <canvas width="456" height="450" id="canvas"></canvas>
    <script>
        function draw(){
            let canvas = document.querySelector('#canvas')
            if(canvas.getContext){
                let pen = canvas.getContext('2d')
                pen.beginPath()
                pen.fillStyle = 'gray'
                pen.fillRect(0,0,canvas.width,canvas.height)
                pen.globalCompositeOperation = 'destination-out';
                pen.lineWidth = 40
                pen.lineCap = 'round'
                canvas.onmousedown=function(e){
                    let ev = e||window.event
                    let x = ev.clientX
                    let y = ev.clientY
                    pen.moveTo(x,y)
                    canvas.onmousemove=function(e){
                        let ev = e||window.event
                        let x = ev.clientX
                        let y = ev.clientY
                        pen.lineTo(x,y)
                        pen.stroke()
                    }
                    canvas.onmouseup = function(){
                        canvas.onmousemove = null
                    }
                }
            }
            
        }
      
    </script>
</body>
</html>