スクリーンセーバーロード画像、ユーザーは何も

Question

を行う場合、私は次の2枚のコード枚持っている（ひどいのが、私は私がやっている見当がつかない）再起動します。

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

のではなく、あなたのコードを解釈で閲覧可能ですが、私は私がこれにアプローチする方法を示す迅速なデモを行いました。

大きな違いは、時間の経過とともに新しい画像を描画すると、フレームごとにレンダリングする必要があることです。このアプローチでは、1つの子を持つキャッシュされたコンテナを使用し、 。（GitHubで "updateCache" デモに似

ここでフィドルある http://jsfiddle.net/dcs5zebm/

キー枚：。contaiをキャッシュ

// 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; 
} 

これは同じスピードを永久に（オーバヘッドなしで）実行しますが、（オートクリアをオフにするのではなく）残りのステージを制御できることを意味します。より複雑な要件がある場合、あなたは好奇心を得ることができます - しかし、これは基本的に私が思うものを行います。