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

来源：互联网发布：视频格式转换软件电脑编辑：程序博客网时间：2024/05/22 11:35

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

html

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

css

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

// 获取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);

1 1