调整窗口大小时重新绘制/擦除画布

Question

我在调整窗口大小或在给定时间后重置画布时遇到一些问题。 我想完成重置并重新设置。 问题是，如果您等待几分钟（因为运行刷新）或重新调整窗口大小，一切都会变得一团糟。 我相信这是因为它在现有画布之上绘制了画布，而这正是贯穿其中的原因。 有关如何解决此问题的任何想法？

 // Constellations function constellations() { var pr = (function () { var ctx = document.createElement("canvas").getContext("2d"), dpr = window.devicePixelRatio || 1, bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1; return dpr / bsr; })(); function t() { this.x = Math.random() * o.width, this.y = Math.random() * o.height, this.vx = -.5 + Math.random(), this.vy = -.5 + Math.random(), this.radius = Math.random() } function d() { for (a.clearRect(0, 0, o.width, o.height), i = 0; i < r.nb; i++) r.array.push(new t), dot = r.array[i], dot.create(); dot.line(), dot.animate() } var o = document.querySelector("#constellations"); var ratio = pr; o.width = $(window).width() * ratio; o.height = $(window).height() * ratio; o.style.width = $(window).width() + "px"; o.style.height = $(window).height() + "px"; o.style.display = "block"; var n = "#1A2732"; var linecolor = "#FF535A"; a = o.getContext("2d"); a.setTransform(ratio, 0, 0, ratio, 0, 0); a.clearRect(0, 0, o.width, o.height); a.fillStyle = n; a.lineWidth = .1; a.strokeStyle = linecolor; var e = { x: 30 * o.width / 100, y: 30 * o.height / 100 }, r = { nb: o.width / 10, distance: 80, d_radius: 150, array: [] }; t.prototype = { create: function() { a.beginPath(), a.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, !1), a.fill() }, animate: function() { for (i = 0; i < r.nb; i++) { var t = r.array[i]; ty < 0 || ty > o.height ? (t.vx = t.vx, t.vy = -t.vy) : (tx < 0 || tx > o.width) && (t.vx = -t.vx, t.vy = t.vy), tx += t.vx, ty += t.vy } }, line: function() { for (i = 0; i < r.nb; i++) for (j = 0; j < r.nb; j++) i_dot = r.array[i], j_dot = r.array[j], i_dot.x - j_dot.x < r.distance && i_dot.y - j_dot.y < r.distance && i_dot.x - j_dot.x > -r.distance && i_dot.y - j_dot.y > -r.distance && i_dot.x - ex < r.d_radius && i_dot.y - ey < r.d_radius && i_dot.x - ex > -r.d_radius && i_dot.y - ey > -r.d_radius && (a.beginPath(), a.moveTo(i_dot.x, i_dot.y), a.lineTo(j_dot.x, j_dot.y), a.stroke(), a.closePath()) } }; var refresh = setInterval(d, 1e3 / 30); $(window).resize(function() { window.clearInterval(refresh); constellations(); }); }constellations(); 

 <canvas id="constellations"></canvas> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

看到它的实际效果。 只需调整分隔器的尺寸并观看。 甚至可能是重置功能的情况。 我不确定应该怎么做才能解决此问题。 这是一个奇怪的。 https://jsfiddle.net/v4dqgazr/

Answer 1

问题是，在调整浏览器大小时，在调整大小时会连续触发$(window).resize() 。 您可以使用David Walsh的反跳方法来解决此问题。

这是带有事件日志的更新演示

去抖动方法如下所示

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Answer 2

只是想对正在发生的事情提供一些见解：

调整窗口大小的每个瞬间，都会调用constellations() 。 显然，不同的浏览器对此处理方式有所不同，Dhiraj的回答应该会对您有所帮助。

我添加了这样的代码，它向您显示了许多实例正在创建并正在运行：

function constellations(instanceID) {

...

function d() {
    console.log("Draw called from instance id: " + instanceID;
    ...
}


$(window).resize(function() {
    window.clearInterval(refresh);
    constellations(Math.random());
});

调整大小后，您会看到许多日志调用。