使用HTML5画布生成文字淡入淡出效果

这是参加“极客编程挑战”的一次命题
代码很简单，记得引入jquery文件额。

html

<div id="container">
    <canvas id="MyCanvas" width="350" height="200">
        不支持HTML5画布
    </canvas>
</div>

css

body {background: #CFCFCF;}
canvas {background: #000;}

js

// 获取canvas对象
var cans = document.getElementById("MyCanvas"); 
var ctx = cans.getContext("2d");    
// 设置字体样式
ctx.font = "40px Arial";
// 设置对其方式
ctx.textAlign="center";     
// 定义透明度相关信息
var sum = 1,ibl = true;

setInterval(function(){
    // 清除画布
    ctx.clearRect(0,0,350,200);
    // 设置内容颜色
    ctx.fillStyle = "rgba(255,255,255,"+sum+")";
    // 设置内容
    ctx.fillText("Hello World!",175,110);

    if(ibl){            
        sum<0?(ibl=false):(sum = sum-0.1);
    }else{
        sum>1?(ibl=true):(sum = sum+0.1);
    }
},100);