原文链接:http://blog.csdn.net/jasondu264/article/details/38064147
看到这个效果,一开始是想一定是用canvas啦,可以建一个蒙版,然后使用擦除就搞定了,但试了一下不行,如果擦除的速度快就会出现一个个不连续的块;
正确的方式是使用绘制线,但将线绘制在蒙版上也不是我们的目的,我们需要的是和蒙版做差值运算,这样才能有擦除的效果;还有一个问题,我们是通过多条线连接来实现的,默认线的连接是不平滑的,这时我们需要设置一个属性:context2D.lineJoin = "round",下面是具体的编码:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
- <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
- </head>
- <body>
- <canvas id="canvas">
- <p>Your browserdoes not support the canvas element!</p>
- </canvas>
- <image id="image" src="http://img0.bdstatic.com/img/image/shouye/mnqz-9561341778.jpg"></image>
- </body>
- </html>
- <style type="text/css">
- body {
- margin: 0;
- padding: 0;
- }
- canvas {
- position: absolute;
- -webkit-transition: all 0.8s;
- }
- .canvas_hide {
- opacity: 0;
- }
- </style>
- <script type="text/javascript">
- var canvas =document.getElementById("canvas");
- var context2D =canvas.getContext("2d");
- var array_paint = [];
- var height = document.documentElement.clientHeight,
- width = document.documentElement.clientWidth;
- // 绘制蒙版
- function draw(height, width) {
- context2D.clearRect(0,0, canvas.width, canvas.height);
- context2D.globalAlpha = 0.8
- context2D.fillStyle ="#FF0000";
- context2D.fillRect(0, 0, width, height);
- context2D.fill();
- }
- // 绘制线
- function paint () {
- // 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示,源图像是透明的。也就是取余
- context2D.globalCompositeOperation = 'destination-out';
- context2D.globalAlpha = 1;
- context2D.strokeStyle ="#ffffff";
- context2D.lineWidth = 20;
- context2D.lineJoin = "round"; // 当两条线条交汇时,创建圆形边角
- for(var i=0; i < array_paint.length; i++)//循环数组
- {
- context2D.beginPath();
- if(array_paint[i] && i){//当是拖动而且i!=0时,从上一个点开始画线。
- context2D.moveTo(array_paint[i-1][0], array_paint[i-1][1]);
- }else{
- context2D.moveTo(array_paint[i][0], array_paint[i][1]);
- }
- context2D.lineTo(array_paint[i][0], array_paint[i][1]);
- context2D.closePath();
- context2D.stroke();
- }
- }
- // 计算擦除的百分比
- function getTransparentPercent(ctx, width, height) {
- // 通过判断每个像素点来计算百分比
- var imgData = ctx.getImageData(0, 0, width, height),
- pixles = imgData.data,
- transPixs = [];
- for (var i = 0, j = pixles.length; i < j; i += 4) {
- var a = pixles[i + 3];
- if (a < 128) {
- transPixs.push(i);
- }
- }
- return (transPixs.length / (pixles.length / 4) * 100).toFixed(2);
- };
- $(document).ready(function () {
- $('#image').css({
- height: height+'px',
- width: width+'px'
- })
- $('canvas').attr({
- height: height+'px',
- width: width+'px'
- })
- draw(height, width);
- $('canvas')
- .on('touchmove', function (event) {
- event.preventDefault();
- var x = event.originalEvent.targetTouches[0].clientX,
- y = event.originalEvent.targetTouches[0].clientY;
- array_paint.push([x, y]);
- paint();
- })
- .on('touchend', function () {
- array_paint = [];
- var percent = getTransparentPercent(context2D, width, height);
- console.log(percent);
- if(percent > 20){
- $('canvas').addClass('canvas_hide');
- }
- });
- })
- </script>