0

我有以下两段代码（可怕但我不知道我在做什么）：

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上查看

4

1 回答 1

0

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

最大的不同是随着时间的推移绘制新图像会增加（它们必须在每一帧都渲染），所以这种方法使用一个带有一个子元素的缓存容器，并且每次滴答都会向缓存中添加更多内容（类似于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;
}

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

于 2017-07-06T22:57:33.593 回答