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中。。這就是基本流程，唯一需要考慮的是動畫時間和距離的把握。。。
網公網安備