关闭

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

标签: canvashtml5
1719人阅读 评论(0) 收藏 举报
分类:

这是参加“极客编程挑战”的一次命题
代码很简单,记得引入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);
1
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:27569次
    • 积分:424
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:1篇
    • 译文:0篇
    • 评论:7条
    最新评论