使用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...
  • watson243671
  • watson243671
  • 2011年11月24日 10:31
  • 3142

文字飞入和飞出

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

Html5下炫酷文字雨滴效果_简单实现

@yuHG在学习h5,需要做个炫酷文字效果,让我帮忙,我也快速学习下html知识,写个demo。 先看下效果: 动态图:http://yunpan.cn/cFdKWrfA7gv2B 访问密码 ...
  • lyltiger
  • lyltiger
  • 2015年10月17日 00:41
  • 3267

转载: 14款震撼人心的HTML5文字特效

14款震撼人心的HTML5文字特效浏览 暂无评论 13 今天我们向大家精选了14款震撼人心的HTML5文字特效,这些文字特效有超酷的动画类型,也有清新的3D类型,不多说,...
  • newboy686
  • newboy686
  • 2014年05月23日 17:39
  • 2451

图片的动画效果(淡出,淡入,显示,隐藏等....外加左右移动)(HTML5)

先来张图: 来一张效果图,其他就不一一展示了,代码都在下面: 代码如下: html> html lang="en"> head> meta charset="UTF-8"> ...
  • qq_40090482
  • qq_40090482
  • 2017年10月10日 18:55
  • 457

超华丽的HTML5 Canvas文字动画特效

文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文...
  • mazegong
  • mazegong
  • 2017年12月14日 17:12
  • 394

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

这是参加“极客编程挑战”的一次命题 代码很简单,记得引入jquery文件额。html 不支持HTML5画布 cssbody {background: #CFCFC...
  • u012793146
  • u012793146
  • 2015年07月07日 16:35
  • 2304

使用CanvasGroup实现渐隐渐显效果

在为image添加组件的时候我们发现一个Canvas Group的组件 添加了这个组件,我们发现几个值 Alpha:该组UI元素的透明度. 这里的alpha值与color.a是对应...
  • qq_26270779
  • qq_26270779
  • 2017年07月10日 11:54
  • 791

Android开发笔记——TextView的高级应用之文本的淡入淡出

我们平时使用TextView往往让它作为一个显示文字的容器,但TextView的功能并不局限于此。在未来的几天里,我将会记录一些TextView的一些高级应用。 今天就来聊聊淡入淡出的效果。淡...
  • qq_25193681
  • qq_25193681
  • 2016年06月01日 14:53
  • 1348

【CSS3】滤镜+【html5】画布实现图片模糊效果

前一阵子在做虾米音乐播放器的时候偶然发现页面背景颜色和歌曲专辑封面很相像,请教老师才知道这是通过模糊效果实现的。 现在做个小小的总结,实现方法大致有如下三种: 1.CSS3 blur滤镜实...
  • scarecrowow
  • scarecrowow
  • 2015年01月07日 13:48
  • 882
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用HTML5画布生成文字淡入淡出效果
举报原因:
原因补充:

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