直接上完整代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <style type="text/css"> #guajiang .bjc { color: black; height: 70px; width: 240px; text-align: center; line-height: 70px; font-size: 20px; position: absolute; top: 300px; left: 60px; background-image: url(img/4-01.png); background-repeat: no-repeat; background-size: 18px 18px; background-position: 80% 53% } #guajiang .guacanvas { z-index: 3; position: absolute; top: 300px; left: 60px } </style> <title>网红</title> </head> <body > <div id='guajiang'> <div class='bjc'>萌赚送你1.5</div> <canvas id="mycanvas" class='guacanvas' width="240" height="70"></canvas> </div> </body> </html>
然后是js代码
var clientwidth = document.documentelement.clientwidth; if(clientwidth *1 >0){ document.queryselector("#guajiang .bjc").style.left = (clientwidth - 240)/2 + "px"; document.queryselector("#guajiang .guacanvas").style.left = (clientwidth - 240)/2 + "px"; } // 得到画笔 var cvs = document.getelementbyid("mycanvas"), ctx = cvs.getcontext("2d"), touchradius = 10; // 默认手指触摸半径，可以自定义设置 // 默认填充灰色来遮住文字 ctx.fillstyle = "#ccc"; ctx.fillrect(0, 0, 240, 70); // fillrect，用矩形填充 ctx.font = '15px arial'; ctx.fillstyle = 'white'; ctx.filltext('您获得一次刮奖机会', 56,40); // 画园的方法 // @param { integer } 圆心的x坐标 // @param { integer } 圆心的y坐标 // @param { integer } 圆心半径 // @param { string } 填充的颜色（本例中会通过其余代码设置为‘透明’，所以这个设置可以忽略） var fillcircle = function (x, y, radius, fillcolor) { this.fillstyle = fillcolor || "#eee"; this.beginpath(); this.moveto(x-90, y-300); this.arc(x-90, y-300, radius, 0, math.pi * 2, false); // 标准画圆 this.fill(); }; // 得到涂抹的百分比 var gettransparentpercent = function (ctx, width, height) { var imgdata = ctx.getimagedata(0, 0, width, height), // 得到canvas的像素信息 pixles = imgdata.data, transpixs = []; for (var i = 0, j = pixles.length; i < j; i += 4) { // 因为存储的结构为[r, g, b, a]，所以要每次跳4个长度 var a = pixles[i + 3]; // 拿到存储alpha通道的值 if (a === 0) { // alpha通道为0，就代表透明 transpixs.push(i); } } return (transpixs.length / (pixles.length / 4) * 100).tofixed(2); } // 需要判断是pc还是手机 var device = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.useragent.tolowercase()), clickevtname = device ? 'touchstart' : 'mousedown', moveevtname = device ? 'touchmove' : 'mousemove'; // 判断是不是开始触摸等 if (!device) { var ismousedown = false; document.addeventlistener('mouseup', function (e) { ismousedown = false; }, false); } else { document.addeventlistener("touchmove", function (e) { if (ismousedown) { e.preventdefault(); } }, false); document.addeventlistener('touchend', function (e) { ismousedown = false; }, false); } // 开始移动 cvs.addeventlistener(clickevtname, function (e) { ismousedown = true; var x = (device ? e.touches[0].clientx : e.clientx); var y = (device ? e.touches[0].clienty : e.clienty); ctx.globalcompositeoperation = 'destination-out'; // 关键部分，描述当在canvas上再次绘画时候的情况，这个设置便是之前所说的透明 fillcircle.call(ctx, x, y, touchradius); console.log("当前涂抹比例为：" + gettransparentpercent(ctx, 240, 70)); }, false); // 移动中 cvs.addeventlistener(moveevtname, function (e) { if (!device && !ismousedown) { return false; } var x = (device ? e.touches[0].clientx : e.clientx); var y = (device ? e.touches[0].clienty : e.clienty); ctx.globalcompositeoperation = 'destination-out'; fillcircle.call(ctx, x, y, touchradius); console.log("当前涂抹比例为：" + gettransparentpercent(ctx, 240, 70)); }, false);
运行之后的效果图