javascript - js drawImage如何产生图片撕裂闪烁，如下代码的逻辑是如何实现的
问题描述
可直接打开链接看效果：http://evilzone.org/。以下是它的代码
<!DOCTYPE html><!-- saved from url=(0020)http://evilzone.org/ --><html><!-- Hello :) --><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><title>Evilzone - Hacking and Security Network</title><style> body {height: 100%;width: 100%;margin: 0;padding: 0;background-color: #191919;font-family: Arial, Helvetica, sans-serif; } .box {color: #c8c8c8;padding: 20px;margin: 20px;border: solid #404040 1px;outline: solid #101010 1px;background-color: #252525;width: 610px;margin-left: auto;margin-right: auto;margin-top: 50px; } .leCanvas {border: solid #404040 1px; outline: solid #101010 1px; background-color: #202020;padding: 10px; }</style> </head> <body><p class='box'> <canvas height='128'></canvas></p><script> var canvas = document.getElementById(’canvas’) , context = canvas.getContext(’2d’) , img = new Image() , w , h , offset , glitchInterval; img.src = ’logo.png’; img.onload = function() { init();window.onresize = init; }; var init = function() {clearInterval(glitchInterval);//清除定时器canvas.width = w = img.width;//将图片的宽度赋值给w，并将画布的宽度设为图片的宽度offset = w * .1;//设置偏移量为w*0.1canvas.height = h = img.height;//将画布的高度设为图片的高度glitchInterval = setInterval(function() { clear();//每一帧清除前一帧 context.drawImage(img, 0, 0, img.width, img.height);//将图片全部剪切粘在画布上 setTimeout(glitchImg, randInt(250, 1000));//随机延时执行glitchImg}, 500); }; var clear = function() {context.clearRect(0, 0, canvas.width, canvas.height); }; var glitchImg = function() {for (var i = 0; i < randInt(1, 13); i++) { var x = Math.random() * w; var y = Math.random() * h; var spliceWidth = w - x;// var spliceHeight = randInt(5, h / 3); context.drawImage(canvas, 0, y, spliceWidth, spliceHeight, x, y, spliceWidth, spliceHeight); //将从（0，y）处剪切的图像附在画布的（x，y）中 context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight); //将从（spliceWidth,y）处剪切的图像附在画布（0,y）处。伸缩宽度在（0,w）,伸缩高度在（5，h/3）} }; var randInt = function(a, b) {return ~~(Math.random() * (b - a) + a); };</script> </body></html>![图片描述][1]
问题解答
回答1：每隔一定的时间将自身canvas绘制的图截取一部分，并重新绘制到canvas中。。这就是基本流程，唯一需要考虑的是动画时间和距离的把握。。。
网公网安备