おう〜 canvas か〜！　俺も勉強しなくっちゃ。

教えてgoo

yyr466さん、作。
きっとオブジェクト指向にして書くはず^^;。
（ Fujillin さんに負けじと、急いで作ったとか？）


私は、忙しいので、暇なときに、お勉強します。
勝手にコピペしました。ごめん。


＞「依頼なし」に500点。
Fujillin さん、お見事！

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>Canvas FadeIn</title>
</head>

<body>
  <div id="thumbnail">
    <ul>
      <li>
        <img src="./img/0.gif"  width="20" height="20"
          onmouseover="fadeIn(this);"
          onmouseout="fadeOut();">
      </li>
    </ul>
  </div>
  
  <canvas id="canvas" width="600" height="100">
  </canvas>
  <br>

<script type="text/javascript" charset="utf-8">
<!--
var canvas, ctx, image, fadeTimer;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.globalAlpha=0;

function fadeIn(img){
  image = img;
  StopFade();
  fadeTimer = setInterval(function(){
    if (ctx.globalAlpha > 0.9) {
      ctx.globalAlpha = 1;
      StopFade();
    } else
      ctx.globalAlpha += 0.1;

    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(image,0,0);
  },100);
}


function fadeOut(){
  StopFade();
  fadeTimer = setInterval(function(){
    if (ctx.globalAlpha < 0.1) {
      ctx.globalAlpha = 0;
      StopFade();
    } else
      ctx.globalAlpha -= 0.1;

    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(image,0,0);
  },100);
}


function StopFade() {
  if(fadeTimer){
    clearInterval(fadeTimer);
    fadeTimer=null;
  }
}
// -->
</script>
</body>
</html>