canvas应用----刮刮乐-蒲公英云

canvas应用----刮刮乐

野性酷女 2022-01-26 11:17 467阅读 0赞

最近在学习html5，为了更好地学习和帮助其他人我决定把我写过的案例写下来~~

先说一下刮刮乐这个程序实现的注意点

材料：一张图片和canvas画布
在html页面只要放图片元素，canvas由js生成。这是为了保证canvas生成在img上面而且保证刚打开页面的时候不会看见图片
生成的canvas涂层要保证大小和位置和图片的相同

CSS

*{padding:0;margin:0;}
body{
    background-color: skyblue;
    text-align: center;
}
#img{
    margin-top: 100px;
    user-select: none;
}
canvas{
    user-select: none;
}

html

<img src = "img/1.jpg" alt="" id = "img">
<input type = "text" id = "txt">

let img = document.querySelector("#img")
let txt = document.querySelector("#txt")
// 保证图片和canvas生成顺序不会出错
if( img.readyState === "complete" ){
    draw()
} else{
    img.onload = draw
}
function draw() {
    // 生成canvas涂层
    let can = document.createElement("canvas")
    // 保证涂层宽高与画布宽高一致
    can.width = img.width
    can.height = img.height
    // 保证涂层位置与画布位置一致
    can.style.position = "absolute"
    can.style.left = img.offsetLeft + "px"
    can.style.top = img.offsetTop + "px"
    // 插入生成的canvas
    img.parentNode.insertBefore( can, img )
    // canvas样式
    let ctx = can.getContext("2d")
    ctx.fillStyle = "#bbb" // 涂层的颜色
    ctx.fillRect( 0, 0, img.width, img.height ) // 填充canvas涂层
    // 以上的样式可以先写在一个字符串中，然后只要用ctx.cssText就好了  但是这里为了更直观我就一步步写了
    // 合成  处理合成图片的透明样式
    // 拖拽的时候使canvas涂层透明
    ctx.globalCompositeOperation = "destination-out"
    // 画笔样式
    ctx.lineWidth = 30
    ctx.lineCap = "round"
    // 拖拽事件
    can.onmousedown = function (e) {
        let x = e.pageX - can.offsetLeft
        let y = e.pageY - can.offsetTop
        // 在涂层点一下的时候要有一个圆点
        ctx.beginPath()
        ctx.arc( x, y, 15, 0, 2*Math.PI, false ) 
        ctx.fill()
         can.onmousemove = function (e) {
             ctx.beginPath()
             ctx.moveTo(  x, y )
             ctx.lineTo( e.pageX - can.offsetLeft, e.pageY - can.offsetTop )
            // 滚动过程中实时更新坐标
            x = e.pageX - can.offsetLeft
            y = e.pageY - can.offsetTop
            // 描线
            ctx.stroke() // 这里是描线，用fill会没有效果
         } 
         document.onmouseup = function (e) {
              // 这里对document绑定事件是因为抬起鼠标的时候可能是在图片之外抬起
            can.onmousemove = null
            this.onmouseup = null
            check() // 这里增加一个功能，已涂面积超过30%的时候显示全部图片
         }
    }
    function check () {
        let data = ctx.getImageData( 0, 0, can.width, can.height ).data
        let n = 0 // 已经刮开的像素点
        for( let i = 0; i < data.length; i+=4 ){
            if( data[i] === 0 && data[i+1] === 0 && data[i+2] === 0 && data[i+3] === 0 ) {
                // 这里的data表示一个像素点的rgba  由于被刮过的像素点变透明，因此此时rgba都为0
                n++
            }
        }
        // 算出当前已刮面积占比
        let f = n * 100 / ( can.width * can.height )
        txt.value = `刮开面积：${f.toFixed(2)}%`
        // 如果超过30%则展示完整画面
        if( f > 30 ){
            ctx.beginPath()
            ctx.fillRect( 0, 0, can.width, can.height )
            txt.value = `给你看完整的图片吧~~`
        }
    }
}