h5画布动画_他们是Heeereee：HTML5画布中的静态动画

h5画布动画

In last week’s article I talked about making static static in canvas: a single pass of random greyscale blocks in a rectangle. In this piece I will animate that effect with a purpose: to fill in the area of a TV screen in the famous still from Tobe Hooper’s Poltergeist, making an HTML5 “cinemagraph”.

在上周的文章中，我谈到了在画布上使静态成为静态：在矩形中单次通过随机灰度块。 在本文中，我将以一种动画效果来实现这一目的：填充Tobe Hooper的Poltergeist着名的静物画中的电视屏幕区域，制作HTML5 “电影放映机” 。

搭建舞台 (Setting The Stage)

The way in which the static is drawn on the page is slightly odd: instead of occupying the entire area of the <canvas> element, the static is drawn in just a portion of that space. The reason will be clear in a moment; first, the HTML markup:

在页面上绘制静态图像的方式有些奇怪：静态图像仅占据该空间的一部分 ，而不是占用<canvas>元素的整个区域。 原因一会儿就清楚了。 首先， HTML标记：

<div id="poltergeist">
    <canvas id="static" width="750" height="580"></canvas>
</div>

And the initial CSS:

和最初的CSS ：

#poltergeist {
    	position: relative;
	padding-top: 76%;
}
#poltergeist canvas, #poltergeist img {
  width: 100%;
  position: absolute;
  top: 0; left: 0;
}

The container element uses the standard absolute-inside-relative trick with padding to place the elements on top of each other without displacing other content.

容器元素使用带有填充的标准绝对内部相对技巧来将元素放置在彼此之上，而不替换其他内容。

静态化 (Getting Static)

The static is drawn using a very similar technique to the last article, just in a smaller area:

使用与上一篇文章非常相似的技术来绘制静态图像，只是在较小的区域中：

var static = document.getElementById("static"),
context = static.getContext("2d"),
tvHeight = 330,
tvWidth = 550,
pixelWidth = 4,
pixelHeight = 3;

function drawStatic() {
    for (var v=55; v < tvHeight; v += pixelHeight){
        for (var h=200; h < tvWidth; h += pixelWidth){
            lum = Math.floor( Math.random() * 40 );
            context.fillStyle = "hsl(0, 0%," + lum + "%)";
            context.fillRect(h,v,pixelWidth,pixelHeight);
      }
   }
 requestAnimationFrame(drawStatic);
}
drawStatic();

This fills the area where the TV screen will be, measured from the original image in PhotoShop:

根据PhotoShop中的原始图像，此区域将填充电视屏幕的区域：

PNG image with TV screen made transparent

带电视屏幕的PNG图像变得透明

Restricting the area of static makes the effect much more efficient.

限制静态区域使效果更有效。

Area of static in canvas, before the PNG is applied on top

在顶部应用PNG之前，画布中的静态区域

Oddly, attempting to paint the PNG file inside the script didn’t work: <canvas> would default to using simple transparency for the image, rather than using the full 32-bit range. It was easier to simply place the image on top, adding to the markup:

奇怪的是，尝试在脚本内绘制PNG文件不起作用： <canvas>将默认为图像使用简单的透明度，而不是使用完整的32位范围 。 只需将图像放在顶部，添加标记就更容易了：

<div id="poltergeist">
    <canvas id="static" width="750" height="580"></canvas>
    <img src="poltergeist-24.png">
</div>

静电之声 (The Sounds of Static)

While not included here, the associated CodePen demo for this article features a “pink noise” sound generated by the Web Audio API to complete the effect:

尽管此处未包括，但本文相关的CodePen演示具有由Web Audio API生成的“粉红色噪声”声音来完成效果：

var audioContext = new(AudioContext ||webkitAudioContext),
gainNode = audioContext.createGain(),
bufferSize = 4096,
pinkNoise = (function() {
    var b0, b1, b2, b3, b4, b5, b6;
    b0 = b1 = b2 = b3 = b4 = b5 = b6 = 0.0;
    var node = audioContext.createScriptProcessor(bufferSize, 1, 1);
    node.onaudioprocess = function(e) {
        var output = e.outputBuffer.getChannelData(0);
        for (var i = 0; i < bufferSize; i++) {
            var white = Math.random() * 2 - 1;
            b0 = 0.99886 * b0 + white * 0.0555179;
            b1 = 0.99332 * b1 + white * 0.0750759;
            b2 = 0.96900 * b2 + white * 0.1538520;
            b3 = 0.86650 * b3 + white * 0.3104856;
            b4 = 0.55000 * b4 + white * 0.5329522;
            b5 = -0.7616 * b5 - white * 0.0168980;
            output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
            output[i] *= 0.11;
            b6 = white * 0.115926;
        }
    }
    return node;
})();

pinkNoise.connect(audioContext.destination);

翻译自: https://thenewcode.com/1105/Theyre-Heeereee-Animating-Static-in-HTML5-Canvas

h5画布动画