画布上的假CRT效果

Question

我希望能让我的画布看起来像是在一个弯曲和圆形的CRT屏幕上，类似于这两个图片： 。我该如何在HTML5画布上实现呢？我可以在画布绘制中实现，或者应用CSS样式到画布中。谢谢！

- James Monger

---

这可能是你要找的：http://www.zachstronaut.com/posts/2012/08/17/webgl-fake-crt-html5.html - Rudie Visser

@RudieVisser 我认为是这样 - 你能否将其提交为答案，以便我接受？ - James Monger

Answer 1

快速搜索得到了这个网站：HTML5游戏的WebGL假CRT效果，它使用了glfx.js库。

这是一个用于将实时WebGL效果应用于图像的库，但是canvas标签实际上可以被视为一个图像源…

演示使用此图像覆盖在canvas上。

实现该效果的代码如下：

// Make sure you've included the glfx.js script in your code!

// Here I load a PNG with scanlines that I overwrite onto the 2D game's canvas.
// This file happens to be customized for the demo game, so to make this a
// general solution we'll need a generic scanline image or we'll generate them
// procedurally.
// Start loading the image right away, not after the onload event.
var lines = new Image();
lines.src = 'http://i.imgur.com/TAJ0Zkw.png';

window.addEventListener('load', fakeCRT, false);

function fakeCRT() {
    var glcanvas, source, srcctx, texture, w, h, hw, hh, w75;

    // Try to create a WebGL canvas (will fail if WebGL isn't supported)
    try {
       glcanvas = fx.canvas();
    } catch (e) {return;}

    // Assumes the first canvas tag in the document is the 2D game, but
    // obviously we could supply a specific canvas element here.
    source = document.getElementsByTagName('canvas')[0];
    srcctx = source.getContext('2d');

    // This tells glfx what to use as a source image
    texture = glcanvas.texture(source);

    // Just setting up some details to tweak the bulgePinch effect
    w = source.width;
    h = source.height;
    hw = w / 2;
    hh = h / 2;
    w75 = w * 0.75;

    // Hide the source 2D canvas and put the WebGL Canvas in its place
    source.parentNode.insertBefore(glcanvas, source);
    source.style.display = 'none';
    glcanvas.className = source.className;
    glcanvas.id = source.id;
    source.id = 'old_' + source.id;

    // It is pretty silly to setup a separate animation timer loop here, but
    // this lets us avoid monkeying with the source game's code.
    // It would make way more sense to do the following directly in the source
    // game's draw function in terms of performance.
    setInterval(function () {
        // Give the source scanlines
        srcctx.drawImage(lines, 0, 0, w, h);

        // Load the latest source frame
        texture.loadContentsOf(source);

        // Apply WebGL magic
        glcanvas.draw(texture)
            .bulgePinch(hw, hh, w75, 0.12)
            .vignette(0.25, 0.74)
            .update();
    }, Math.floor(1000 / 40));
}

通常情况下可以使用，但需要提醒的是Safari 6有可能会让整个系统冻结至少一分钟，但并非每次都会发生。您在Chrome浏览器中的体验可能更好。

- Rudie Visser

---

太棒了！如果您能在答案中直接添加一些相关代码，那就更好了。 - service-paradis

@morgul 添加了一个示例。 - Rudie Visser