canvas菜鸟入门笔记2

canvas自制刮刮卡~

效果图

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvs刮刮乐</title>
    <style>
      html,
      body,
      .container{
        height: 100%;
        width: 100%;
       }
       .container{
       position: relative;
       }
        #demo4{
            position: absolute;
            top:50%;
            left: 50%;
            border: 1px solid rgb(19, 18, 18);
        }
        #content{
            position: absolute;
            top: 53.5%;
            left: 53.5%;
            z-index: -1;
            padding:10px;
            font-size: 15px;
            background-color: rgb(175, 241, 88);
        }
    </style>
</head>
<body>
    <div class="container">
    <canvas id="demo4" width="200px" height="100px"></canvas>
    <div id="content">获得女朋友一枚</div>
    </div>
    <script  type="text/javascript">
    //获取元素dom
    let demo4=document.querySelector('#demo4')
    //指定画布是2d形式
    let ctx= demo4.getContext('2d')
    //改变画布的原点
    // ctx.translate(100,100)
    // 保存当前状态
    // ctx.save()
    // -----------------------------------------------------刮刮乐的框
    // 填充颜色
    ctx.fillStyle = '#ccc'
    // 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)
    ctx.fillRect(0,0,200,100)
    // ----------------------------------------------------刮刮乐的文字
    //填充的颜色
    ctx.fillStyle = 'black'
    //设置文字大小和样式
    ctx.font = "20px serif";
    // 绘制填充文字
    ctx.fillText('刮刮乐', 70, 50)
    // --------------------------------------------------分析实现瓜瓜乐原理
    //设置一个变量接收布尔值，当监听发生鼠标按下，改变状态
    // 鼠标按下并移动的时候，点击的位置为圆心画圆 用合成操作ctx.globalCompositeOperation = type;destination-out// 现有内容保持在新图形不重叠的地方。
    // 当鼠标抬起的时候 状态恢复
    //  ctx.arc(圆心x,圆心y, 半径, 圆弧的起始点x轴方向开始计算, 圆弧的终点);
    let toggle=false
    let container=document.querySelector('.container')
    container.addEventListener('mousedown',()=>{
        toggle=true
      
    })
    container.addEventListener('mousemove',(e)=>{
        if(toggle){
            //获取鼠标在画布中的位置 鼠标在页面的x,y-原点到画布的x,y--作为圆的圆心
            const x=e.pageX- demo4.offsetLeft
            const y=e.pageY-demo4.offsetTop
            //设置合成配置
            ctx.globalCompositeOperation ='destination-out'
            ctx.arc(x,y,10,0,2*Math.PI)
            ctx.fill()
        }
    })
    container.addEventListener('mouseup',()=>{
        toggle=false
    })
    </script>
</body>
</html>

思路:准备一个画布一个div盒子定位到同样的位置,将div的层级变小,画布压住div

擦拭效果是通过canvas的合成配置类型进行完成的

ctx.globalCompositeOperation ='destination-out'

通过事件监听,判断鼠标现在的状态是按下还是抬起变更变量的状态

当鼠标按下并且移动的时候出现擦拭效果,点击位置画圆,就ok了

canvas菜鸟入门笔记2

猜你喜欢