0

我有一个导致画布元素“故障”的效果。我想编辑效果，以便在每个故障之间有更多的停顿 - 到目前为止，故障暂停太短并且故障与之前的故障太接近。你可以在这里看到它的实际效果：http: //naratif.jvitasek.cz/

此外，故障代码如下：

function glitchElement(sourceImg, idCanvas) {
    var canvas = document.getElementById(idCanvas)
      , context = canvas.getContext('2d')
      , img = new Image()
      , w
      , h
      , offset
      , glitchInterval;

    img.src = sourceImg;
    img.onload = function() {
      init();
        window.onresize = init;
    };

    var init = function() {
        clearInterval(glitchInterval);
        canvas.width = w = window.innerWidth;
        offset = w * .1;
        canvas.height = h = ~~(230 * ((w - (offset * 2)) / img.width));
        glitchInterval = setInterval(function() {
            clear();
            context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
            setTimeout(glitchImg, randInt(250,1000));
        }, 500);
    };

    var clear = function() {
        context.rect(0, 0, w, h);
        context.fillStyle = "white";
        context.fill();
    };

    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);
            context.drawImage(canvas, spliceWidth, y, x, spliceHeight, 0, y, x, spliceHeight);
        }
    };

    var randInt = function(a, b) {
        return ~~(Math.random() * (b - a) + a);
    };
}

在这段代码中，必须有一种方法可以使暂停时间更长。这意味着保持一切原样，但是出现故障......等待更长时间的图像没有效果（静态）......然后在大约 6 秒后再次出现故障（我认为现在它在 1 到 1.5 秒之间） .

我只需要一个库函数的名称或可以帮助我做到这一点的东西。我查看了 setTimeout 和 setInterval 但无法真正弄清楚。任何帮助表示赞赏。

4

2 回答 2

1

setTimeout 有两个参数：要调用的函数和调用函数的时间（以毫秒为单位）。在您的代码中有两个 setTimeouts：

glitchInterval = setInterval(function() {
    clear();
    context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
    setTimeout(glitchImg, randInt(250,1000));
}, 500);

glitchInterval 的持续时间为 500，即 0.5 秒。glitchInterval 触发的函数内部的 setInterval 的持续时间为randInt(250, 1000)，这可能是 0.25 到 1 秒之间的随机持续时间。您可以更改这些持续时间以获得所需的结果。

于 2015-12-19T16:31:25.750 回答
0

为了达到所需的效果，我不得不重写 init() 函数并添加一个 redraw() 函数，如下所示：

var init = function() {
    clearInterval(glitchInterval);
    canvas.width = w = window.innerWidth;
    offset = w * 0.1;
    canvas.height = h = ~~(230 * ((w - (offset * 2)) / img.width));
    glitchInterval = setInterval(function() {
        clear();
        console.log('glitching');
        context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
        glitchImg();
        setTimeout(function() {
            clear();
            redraw();
            console.log('redrawing');
        }, randInt(100,1000)); // the time the image is glitched
    }, randInt(5000,10000)); // the interval between each glitch
};

重绘功能：

function redraw() {
    context.drawImage(img, 0, 0, img.width, 230, offset, 0, w - (offset * 2), h);
}
于 2015-12-23T11:01:47.877 回答