ZC

梦想,不是你睡觉时梦到了什么,而是想到了什么令你激动得没法睡觉。

使用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);
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012793146/article/details/46791253
文章标签: canvas html5
个人分类: Jquery 小东西
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭