Белый шум на JS

Пример:

Телевизор я добавлять не стал, его можно поискать в интернете по своему вкусу или использовать этот шум в других целях.

HTML:

<canvas id="noisy-canvas"></canvas>

1	<canvas id="noisy-canvas"></canvas>

CSS:

#noisy-canvas {
    width:100%;
    height: 300px;
}

#noisy-canvas {

width:100%;

height: 300px;

}

JS:

let canvas = document.getElementById('noisy-canvas'),
	ctx = canvas.getContext('2d');
function main() {
    window.addEventListener('resize', updateCanvasSize);
    updateCanvasSize();
    render();
}
function getRandom() {
    return Math.random() * 255;
}
function render() {
    let imageData = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);
    for (let i = 0; i < imageData.data.length; i += 4) {
        const color = getRandom();
        imageData.data[i]     = color;
        imageData.data[i + 1] = color;
        imageData.data[i + 2] = color;
        imageData.data[i + 3] = 255;
	}
    ctx.putImageData(imageData, 0, 0);
    requestAnimationFrame(render);
}
function updateCanvasSize() {
    ctx.canvas.height = canvas.offsetHeight;
    ctx.canvas.width  = canvas.offsetWidth;
}
main();

let canvas = document.getElementById('noisy-canvas'),

ctx = canvas.getContext('2d');

function main() {

window.addEventListener('resize', updateCanvasSize);

updateCanvasSize();

render();

}

function getRandom() {

return Math.random() * 255;

}

function render() {

let imageData = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);

for (let i = 0; i < imageData.data.length; i += 4) {

const color = getRandom();

imageData.data[i] = color;

imageData.data[i + 1] = color;

imageData.data[i + 2] = color;

imageData.data[i + 3] = 255;

}

ctx.putImageData(imageData, 0, 0);

requestAnimationFrame(render);

}

function updateCanvasSize() {

ctx.canvas.height = canvas.offsetHeight;

ctx.canvas.width = canvas.offsetWidth;

}

main();

Жека: 28.07.2021 в 16:38

Классная штука, но я начинающий сайтодел 🙁 и никак не могу прикрутить сию красоту к фону сайта ... Помогите!!!

Ответить
- Alexander: 28.07.2021 в 22:23
  
  Через абсолют накладывается, вот пример похожий
  
  Ответить
  - Жека: 29.07.2021 в 00:25
    
    Спасибо. Ушел разбираться.
    
    Ответить
Иван: 23.01.2021 в 13:00

А можно ли его сделать полупрозрачным? И как, если можно?

Ответить
- Alexander: 23.01.2021 в 14:09
  CSS
  
  .noisy-bg { background: url(background.jpg); background-size: cover; } #noisy-canvas { width:100%; height: 300px; opacity: 0.5; }
  
  HTML
  
  <div class="noisy-bg"> <canvas id="noisy-canvas"></canvas> </div>
  Ответить
  - Иван: 23.01.2021 в 15:33
    
    Благодарю, то что надо!
    
    Ответить
Александр: 22.01.2021 в 15:27

Спасибо

Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: