给我一首诗的时间

前端入坑纪 59

今天来分享最简单版打字机效果

好，详解如下！

OK，first things first！ 点我查看实际效果

诗仙,你好

HTML 结构

<canvas id="cav"></canvas>

通过canvas里面来模拟打字的效果,所以一个canvas容器是必须的

CSS 结构

        html,body
        {
            margin: 0;
            padding: 0;
            font-size: 0;
        }

用 font-size: 0; canvas设置完等同屏幕宽高后,可以占满屏幕(图片也是这样)

JavaScript 结构

        window.onload = function () {

            var cav = document.querySelector('#cav')
            var ctx = cav.getContext('2d')

            var sw = screen.availWidth
            var sh = screen.availHeight

            cav.width = sw
            cav.height = sh

            var poetry = ['床前明月光', '疑是地上霜', '举头望明月', '低头思故乡']
            var poetryArr = []

            ctx.fillStyle = "#332833"
            ctx.font = "26px cursive"
            ctx.textAlign = "left"

            var text = ctx.measureText(poetry[0])
          // 计算每行第一个字的坐标(屏幕宽度减掉一行字的宽度)的一半
            var poiX = (sw - text.width) * 0.5

          // 将poetry拆分成二维数组
            poetry.forEach(function (item, index) {
                var ziArr = item.split("")
                poetryArr.push(ziArr)
            })


          // 每隔170毫秒打一个字,一行结束换下一行,从头开始,最后清除定时器
            var i = j = 0
            var tik = setInterval(() => {
                if (i < poetryArr.length) {
                    if (j < poetryArr[i]['length']) {
                        ctx.fillText(poetryArr[i][j], poiX + 26 * j, 100 + 40 * i)
                        j++
                    } else {
                        i++;
                        j = 0
                    }
                }else{
                    clearInterval(tik)
                }
            }, 170);
        }

就是这样,那么感兴趣的小伙伴,可以好好研究下

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包