画像が少しずつ出るシンプルバージョン

<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>