Эффект шумовых помех на HTML5 Canvas
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.grain { width: 100%; height: 100%; z-index: 1; } .apo1 { width: 100%; height: 100%; position: absolute; top: 0px; z-index: -1; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<canvas class="grain"></canvas> <img class="apo1" src="ССЫЛКА_НА_КАРТИНКУ"> <script> function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Grain = function() { function Grain(el) { _classCallCheck(this, Grain); /** * Options */ this.patternSize = 150; this.patternScaleX = 1; this.patternScaleY = 1; this.patternRefreshInterval = 3; // 8 this.patternAlpha = 15; // int between 0 and 255, /** * Create canvas */ this.canvas = el; this.ctx = this.canvas.getContext('2d'); this.ctx.scale(this.patternScaleX, this.patternScaleY); /** * Create a canvas that will be used to generate grain and used as a * pattern on the main canvas. */ this.patternCanvas = document.createElement('canvas'); this.patternCanvas.width = this.patternSize; this.patternCanvas.height = this.patternSize; this.patternCtx = this.patternCanvas.getContext('2d'); this.patternData = this.patternCtx.createImageData(this.patternSize, this.patternSize); this.patternPixelDataLength = this.patternSize * this.patternSize * 4; // rgba = 4 this.resize = this.resize.bind(this); this.loop = this.loop.bind(this); this.frame = 0; window.addEventListener('resize', this.resize); this.resize(); window.requestAnimationFrame(this.loop); } Grain.prototype.resize = function resize() { this.canvas.width = window.innerWidth * devicePixelRatio; this.canvas.height = window.innerHeight * devicePixelRatio; }; Grain.prototype.update = function update() { var patternPixelDataLength = this.patternPixelDataLength; var patternData = this.patternData; var patternAlpha = this.patternAlpha; var patternCtx = this.patternCtx; // put a random shade of gray into every pixel of the pattern for (var i = 0; i < patternPixelDataLength; i += 4) { // const value = (Math.random() * 255) | 0; var value = Math.random() * 255; patternData.data[i] = value; patternData.data[i + 1] = value; patternData.data[i + 2] = value; patternData.data[i + 3] = patternAlpha; } patternCtx.putImageData(patternData, 0, 0); }; Grain.prototype.draw = function draw() { var ctx = this.ctx; var patternCanvas = this.patternCanvas; var canvas = this.canvas; var viewHeight = this.viewHeight; var width = canvas.width; var height = canvas.height; // clear canvas ctx.clearRect(0, 0, width, height); // fill the canvas using the pattern ctx.fillStyle = ctx.createPattern(patternCanvas, 'repeat'); ctx.fillRect(0, 0, width, height); }; Grain.prototype.loop = function loop() { // only update grain every n frames var shouldDraw = ++this.frame % this.patternRefreshInterval === 0; if (shouldDraw) { this.update(); this.draw(); } window.requestAnimationFrame(this.loop); }; return Grain; }(); var el = document.querySelector('.grain'); var grain = new Grain(el); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
