运用fillText，写的打字效果。

唯一麻烦的地方是，换行问题，

我是把字符串转化为数组，数组一个单位完成，就换行，继续下一个单位。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>canvas</title>

<style type="text/css">

canvas { border: 1px solid black; }

#change{width:200px; line-height:30px; color:#fff; text-align:center; background:blue;}

</style>

<script type="text/javascript" charset="utf-8">

var text = "东临碣石，以观沧海。|水何澹澹，山岛竦峙。|树木丛生，百草丰茂。|秋风萧瑟，洪波涌起。|日月之行，若出其中。|星汉灿烂，若出其里。|幸甚至哉，歌以咏志。";

var arr = text.split("|");

var line = 0;

var timer = 0;

var i = 0;

var newText = "";

function Typing(id) {

    var canvas = document.getElementById(id);

    if (canvas == null) {

        return false;

    }

    scrollit();

}

function scrollit() {

    newText = arr[line].slice(0, i++) + "_";

    var context = canvas.getContext("2d");

    // 擦除文字

    context.clearRect(0, 20 + line * 30, 600, 20 + 30 * (line + 1));

    var gradient = context.createLinearGradient(0, 0, 200, 0);

    gradient.addColorStop("0", "magenta");

    gradient.addColorStop("0.5", "blue");

    gradient.addColorStop("1.0", "red");

    context.fillStyle = gradient;

    context.font = "20px Verdana";

    context.textBaseline = "hanging";

    if (i > arr[line].length) {

        newText = arr[line].slice(0, arr[line].length);

        context.fillText(newText, 30, 20 + 30 * line);

        // 换行

        i = 0;

        line++;

        if (line < arr.length) {

            clearTimeout(timer);

            scrollit();

        };

    } else {

        context.fillText(newText, 30, 20 + 30 * line);

        timer = setTimeout(scrollit, 200);

    }

}

window.onload = function() {

    Typing("canvas");

}

</script>

</head>

<body>

<canvas id="canvas" width="600" height="400"></canvas>

<img id="newImg" src="" alt="" widt="100" height="100">

<div id="demo">hh</div>

</html>

canvas打字效果的更多相关文章

  1. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  2. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

  3. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  4. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  5. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  6. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  7. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

  8. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  9. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

随机推荐

  1. 关于xshell连接阿里云服务器后报错的问题，git安装失败，找不到git包

    1.如果安装git出现这样的错误的,在接下来键入这样一行命令 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-c ...

  2. ubuntu启动进程笔记

    --防止程序随着web终端一起被关闭方法: 1.Screen -ls 查看当前进程2.Screen -S XX XX是自定义的进程名回车完 进入这个进程,在这个进程里面 可以启动 程序 3.正常返回: ...

  3. MVC的Forms登录验证

    第一步:修改web.config配置 在 <system.web>节点下加入配置:未登录的用户跳转到/Home/Login,登录后跳转到/Home/UserCenter,登录后票证记录到c ...

  4. input框和文字对齐问题

    css样式解决! style="vertical-align: text-bottom;margin-bottom: 2px;"一.问题产生的条件对于14像素大小的字体是没有本篇所 ...

  5. Lucene/Solr企业级搜索学习资源

    Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http GSol ...

  6. 使用java5的注解和Sping/AspectJ的AOP 来实现Memcached的缓存

    使用java5的注解和Sping/AspectJ的AOP 来实现Memcached的缓存 今天要介绍的是Simple-Spring-Memcached,它封装了对MemCached的调用,使MemCa ...

  7. C#设计模式-2工厂方法模式（Factory Method）

    什么是工厂模式?类比生活中的概念,当我们需要打电话的时候,我们需要一部手机,我们通常会选择直接去卖手机的实体店买.但在程序设计中,当我们需要调用一个类(PhoneA或PhoneB)的方法的时候,我们往 ...

  8. （转）在WCF服务的ServiceReferences.ClientConfig中使用相对路径

    问题: Silverlight项目中添加服务引用后会在Silverlight项目中生成一个ServiceReferences.ClientConfig文件,这个文件中包含了引用服务的绑定(bindin ...

  9. hdu 1254(两个BFS) 推箱子

    http://acm.hdu.edu.cn/showproblem.php?pid=1254 首先,要判断人是不是可以从4到达箱子的位置2,而且不止判断一次,因为推动箱子一步后,人的位置也会改变,所以 ...

  10. BZOJ1217或洛谷2279 [HNOI2003]消防局的设立

    BZOJ原题链接 洛谷原题链接 该题有两种做法,树形\(DP\)和贪心. 先讲贪心. 先将所有点按深度从大到小排序,然后从大到小依次取出点,若已经被覆盖则跳过,否则就在它的祖父点建立消防站. 考虑如何 ...