canvas应用----刮刮乐

野性酷女 2022-01-26 11:17 357阅读 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**

**js**

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 = `给你看完整的图片吧~~`
    		}
    	}
    }

好了，要是有什么问题或者建议的话欢迎联系我~

Wish you godspeed!