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

原创 2015年07月07日 16:35:06

这是参加“极客编程挑战”的一次命题
代码很简单,记得引入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);
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

canvas中的图片特效:淡入淡出,旋转,扭动

原文作者:Matthew Casperson 编辑:Michele McDonough 原文链接: Game Development with JavaScript and the Canvas el...

HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)

两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的...

文字飞入和飞出

我们看到在一个界面上,文字可以从里向外飞出,也可以从外向里飞入,下面我们就研究一下这个效果。 思路:   1.设置要最新要展示的文字。   2.设置View的动画    (1)设置当前的V...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Windows7下OEM中证书错误,导航已阻止解决办法

今日,又遇到了这个错误,在OEM中,出现了证书错误,导航已阻止!点击继续浏览,没有反应! 上网查了下说是Windows的KB2661254补丁问题,只要把这个补丁卸载了就可以,今天仔仔细细的找,但没找...

利用tomcat服务器配置https双向认证、https单向认证-ssl、tls

关键字:利用tomcat服务器配置https双向认证、https单向认证-ssl、tls  首先推荐另一篇不错的文章:http://lixor.iteye.com/blog/1532655  很多...

分享一个HTML5画布实现的超酷文字弹跳球效果

日期:2012/03/05  来源:GBin1.com 在线演示  本地下载 今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML...
  • jjfat
  • jjfat
  • 2012年03月07日 18:00
  • 588

【OneAPM】极客编程挑战#023:使用HTML5画布生成渐变自由落体小球效果

本期挑战  给定如下HTML: id="gbcanvas" width="350" height="300"> 阅读如下的相关HTML5画布教程: HTML5画布实现的粒子运...
  • jjfat
  • jjfat
  • 2015年06月20日 07:39
  • 1783

html5中canvas画布实现手机端和移动端的刮刮乐效果

用html5中的canvas实现刮刮乐的效果 使用html+css实现背景的样式 使用clearRect()方法实现挂去的作用 手机端使用addEventListener()监听 手机端滑动事件tou...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用HTML5画布生成文字淡入淡出效果
举报原因:
原因补充:

(最多只允许输入30个字)