使用canvas制作刮刮卡效果（1）

来源：互联网发布：淘宝智能版有间隙编辑：程序博客网时间：2024/04/28 13:05

本效果目前只有touch事件，还没有做pc端和手机端的区分和适应。

另外，只是单纯的刮的效果，兼容性目前还没有广泛测试，希望看到的不兼容性能够提出来哦，如果有解决办法那就更好啦~

下一步会加入多端适应。

html代码：

<canvas id="canvas"></canvas><div id="bgimg"></div>

css样式：

<style type="text/css">*{ margin: 0 auto; padding:0;}body{ width: 100%; height: 100%; overflow: hidden;}canvas,#bgimg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}canvas{ z-index: 100;}#bgimg{ background: url(bg.jpg) no-repeat center; background-size: cover; z-index: 50; display: none;}</style>

js：

<script type="text/javascript">var ww = window.innerWidth;var wh = window.innerHeight;var body = document.getElementsByTagName('body').item(0),canvas = document.getElementById('canvas'),bgimg = document.getElementById('bgimg');body.style.width = ww;body.style.width = wh;canvas.width = ww;canvas.height = wh;var ctx = canvas.getContext('2d');var canimg = new Image();canimg.src = 'img.jpg';canimg.onload = function(){bgimg.style.display = 'block';var imgwidth = canimg.width;var imgheight = canimg.height;if(imgwidth/imgheight > ww/wh){var sh = imgwidth - (ww*imgheight)/wh;ctx.drawImage(canimg,sh/2,0,(ww*imgheight)/wh,imgheight,0,0,ww,wh);}else if(imgwidth/imgheight < ww/wh){var sw = imgheight - (wh*imgwidth)/ww;ctx.drawImage(canimg,0,sw/2,imgwidth,(wh*imgwidth)/ww,0,0,ww,wh);}else{ctx.drawImage(canimg,0,0);}ctx.lineCap = 'round';ctx.lineJoin = 'round';ctx.lineWidth = 40;ctx.strokeStype = "transprent";ctx.globalCompositeOperation = "destination-out";var x1,x2,y1,y2;canvas.addEventListener('touchstart',function(){event.preventDefault();var touch = event.targetTouches[0];x1 = touch.pageX;y1 = touch.pageY;//ctx.pointTo(x1,y1);},false);canvas.addEventListener('touchmove',function(){event.preventDefault();var touch = event.touches[0];ctx.save();ctx.translate(1,1);ctx.beginPath();x2 = touch.pageX;y2 = touch.pageY;ctx.moveTo(x1,y1);//ctx.arc(x,y,20,0,2*Math.PI);//ctx.fill();ctx.lineTo(x2,y2);x1 = x2;y1 = y2;ctx.stroke();ctx.translate(0,0);ctx.restore();ctx.closePath();},false);canvas.addEventListener('touchend',function(){},function(){event.preventDefault();});}</script>

底下的图片：

上一层的图片：

刮开的效果：

0 0