屏幕保护程序在不活动后在 radom 位置加载图像，如果用户执行任何操作，则会重新启动

Question

我有以下两段代码(很糟糕，但我不知道我在做什么(：

var stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", tick);
// Simple loading for demo purposes.
var image = document.createElement("img");
image.src = "http://dossierindustries.co/wp-content/uploads/2017/07/DossierIndustries_Cactus-e1499205396119.png";
var _obstacle = new createjs.Bitmap(image);
setInterval(clone, 1000);
function clone() {
var bmp = _obstacle.clone();
bmp.x= Math.floor((Math.random() * 1920) + 1);
bmp.y = Math.floor((Math.random() * 1080) + 1);
stage.addChild(bmp);
}
function tick(event) {
stage.update(event);
}
<script>
$j=jQuery.noConflict();
jQuery(document).ready(function($){
var interval = 1;
setInterval(function(){
if(interval == 3){
$('canvas').show(); 
interval = 1; 
}
interval = interval+1;
console.log(interval);
},1000);
$(document).bind('mousemove keypress', function() {
$('canvas').hide();
interval = 1; 
});
});

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="1920" height="1080"></canvas>

基本上，我希望实现的是，当用户处于非活动状态x时间时，整个页面(无论大小如何(都会慢慢填充重复的图像。当任何事情发生时，它们都会清除，并在设定的不活动量后再次开始。

上面的代码依赖于我想避免的外部资源，需要在 Wordpress 上工作。

网站可在 dossierindustries.co 查看

Answer 1

我没有解释你的代码，而是做了一个快速演示，展示了我如何处理这个问题。

最大的区别是，随着时间的推移绘制新图像会加起来(它们必须每帧渲染一次(，因此这种方法使用带有一个子级的缓存容器，并且每个勾号都会向缓存中添加更多内容(类似于GitHub中的"updateCache"演示。

这是小提琴。 http://jsfiddle.net/dcs5zebm/

关键部分：

// Move the contents each tick, and update the cache
shape.x = Math.random() * stage.canvas.width;
shape.y = Math.random() * stage.canvas.height;
container.updateCache("source-over");
// Only do it when idle
function tick(event) {
if (idle) { addImage(); }
stage.update(event);
}
// Use a timeout to determine when idle. Clear it when the mouse moves.
var idle = false;
document.body.addEventListener("mousemove", resetIdle);
function resetIdle() {
clearTimeout(this.timeout);
container.visible = false;
idle = false;
this.timeout = setTimeout(goIdle, TIMEOUT);
}
resetIdle();
function goIdle() {
idle = true;
container.cache(0, 0, stage.canvas.width, stage.canvas.height);
container.visible = true;
}

缓存容器意味着它永远以相同的速度运行(没有开销(，但您仍然可以控制阶段的其余部分(而不仅仅是关闭自动清除(。如果你有更复杂的要求，你可以变得更漂亮 - 但这基本上是你想要的。