画像が少しずつ出るシンプルバージョン
<canvas id="Picture" stule="display:none;"> </canvas> <script type="text/javascript"> var limit = 30;//画像が表示されきるまでにかかる時間(秒) var imgURL = "http://www.scp-wiki.net/local--files/component:theme/logo.png";//表示したい画像 var TimeSpan = 30;//動作のなめらかさ。数が小さい程滑らかになる var ShowCanvas;//描画用 var ShowCtxCanvas;//描画用 var OriginalPicture;//計算用 var OriginalHeight = 0;//計算用 var OriginalWidth = 0;//計算用 var StartTime = 0;//時間計算用 var CurrentTime = 0;//現在時間 var SafetyCounter = 0;//SetUpPictureが2重起動しない為の安全弁 document.addEventListener("DOMContentLoaded",function(){ limit *= 1000;//目標時間をミリ秒単位に直す OriginalPicture = new Image(); OriginalPicture.onload = SetUpPictLoad; OriginalPicture.src = imgURL; }); function SetUpPictLoad(){ if(SafetyCounter > 0)return;//2重起動防止 //Canvasエレメントの取得及び初期化 ShowCanvas = document.getElementById("Picture"); ShowCanvas.removeAttribute("style"); //画像の本来の大きさを取得 OriginalWidth = OriginalPicture.width; OriginalHeight =OriginalPicture.height; //画像本来の大きさに合わせCanvasの大きさ調整 ShowCanvas.setAttribute("width",OriginalWidth); ShowCanvas.setAttribute("height",OriginalHeight); //描画準備 ShowCtxCanvas = ShowCanvas.getContext("2d"); //時間計測の準備を行う StartTime = (new Date()).getTime(); CurrentTime = StartTime; //セーフティを起動 SafetyCounter++; //時間経過に伴う描画開始 DrawingOnTime(); } function DrawingOnTime(){ //現在の時刻を取得 CurrentTime = (new Date()).getTime(); //目標経過時間に対し何%経過したか計算 var ProgressTime = (CurrentTime - StartTime)/limit; //目標経過時間を超過していた場合、パーセンテージを1に調整 if(ProgressTime > 1){ ProgressTime = 1; } //時間経過に合わせた画像の高さを計算 var CurrentHeight = Math.floor(OriginalHeight*ProgressTime); //カンバスに描画 ShowCtxCanvas.clearRect(0, 0, OriginalWidth, OriginalHeight); ShowCtxCanvas.drawImage(OriginalPicture,0,0,OriginalWidth,CurrentHeight,0,0,OriginalWidth,CurrentHeight); //画像がまだ100%出ていない場合はこの関数を指定時間後に再び起動する if(ProgressTime < 1){ setTimeout(DrawingOnTime,TimeSpan); } } </script>
page revision: 26, last edited: 04 Nov 2017 05:59