canvas绘制字体动画特效

最新推荐文章于 2024-05-21 20:53:01 发布

猴子的时光机

最新推荐文章于 2024-05-21 20:53:01 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/houbucea/article/details/110390214

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype HTML>  
<html>  
    <meta charset="utf8"/>  
    <title>canvas test</title>  
    <meta name="description" content="">  
    <meta name="HandheldFriendly" content="True">  
    <meta name="MobileOptimized" content="320">  
    <meta name="format-detection" content="telephone=no">  
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
    <body>  
        <canvas id="first">不支持</canvas>  
        <canvas id="second">不支持</canvas>  
        <script>  
            var canvas = document.getElementById('first'),  
            canvas2 = document.getElementById('second');  
  
            canvas.width = 400;  
            canvas.height = 200;  
  
            canvas2.width = 400;  
            canvas2.height = 200;  
  
            var ctx = canvas.getContext("2d"),  
                ctx2 = canvas2.getContext("2d");  
  
            //order maters a lot, it's related to the measureText  
  
            ctx.font = ctx2.font = "normal bold 2em sans-serif";  
  
            ctx.fillStyle = ctx2.fillStyle= "#c01c1d";  
  
            var message = "HelloWorld";  
  
            var metrics = ctx.measureText(message);  
  
            console.log(metrics);  
  
            var xPosition = (canvas.width - metrics.width) / 2;  
  
            console.log(xPosition);  
  
            var styles = ["#f2d","#ff2","#2f3","#2f7","#fff","#333","#aaa","#eee","#3e3","#bbb"];  
  
  
            var yPosition = canvas.height /2 ;  
  
            //setInterval(function () {  
            // requestAnimationFrame(function () {  
            //  var idx = Math.floor(Math.random() * 10);  
  
            //  ctx.fillStyle = styles[idx];  
  
            //  ctx.fillText(message,xPosition,yPosition);  
            // });  
            //},16)  
  
            ctx.fillText(message,10,yPosition);  
  
            ctx2.fillText(message,10,yPosition);  
              
            var text = [],marginLeft = 10,_m,_obj,_sepWidthSum = 0;  
  
            for(var i = 0 ; i < message.length; i++){  
                //_m = ctx.measureText(message[i]);  
  
                _m = ctx.measureText(message.substr(0,i));  
  
                //ctx.fillText(message[i],marginLeft,yPosition);  
  
                _obj = {  
                    text : message[i],  
                    marginLeft : marginLeft + _m.width  
                }  
  
                //marginLeft += _m.width;  
                //_sepWidthSum += _m.width;   
  
                text.push(_obj);  
  
            }  
  
            //console.log(metrics.width - _sepWidthSum);  
  
              
  
            // var index = 0;  
  
            // function draw () {  
  
            //  setTimeout(function () {  
                      
            //      if(index  < text.length){  
            //          ctx.fillStyle = "#333";  
            //          ctx.fillText(text[index].text,text[index].marginLeft,yPosition);  
  
            //          if(index){  
            //              ctx.fillStyle = "#f2d";  
            //              ctx.fillText(text[index - 1].text,text[index -1].marginLeft,yPosition);  
            //          }  
                          
            //          index++;  
            //          if(index = text.length){  
            //              // setTimeout(function () {  
            //              // ctx.fillStyle = "#f2d";  
            //              // ctx.fillText(text[index - 1].text,text[index -1].marginLeft,yPosition);  
            //              // },30);  
            //              // index = 0;  
            //              // draw();  
            //          }else{  
            //              draw();  
            //          }  
            //          //draw();  
            //      }  
            //  },30);  
  
  
            // }  
  
            var TIMER = 70;  
  
            function draw(index) {  
  
                setTimeout(function (index) {  
                    return function () {  
  
                        //console.log(index);  
  
                        if(index  < text.length){  
                            //requestAnimationFrame(function () {  
                                ctx.fillStyle = "#ffac00";  
                                ctx.fillText(text[index].text,text[index].marginLeft,yPosition);  
                            //});  
                              
  
                            if(index){  
                                //requestAnimationFrame(function() {  
                                    ctx.fillStyle = "#fff";  
                                    ctx.fillText(text[index - 1].text,text[index -1].marginLeft,yPosition);  
                                    ctx.fillStyle = "#c01c1d";  
                                    ctx.fillText(text[index - 1].text,text[index -1].marginLeft,yPosition);  
  
                                //});  
                            }else{  
                                //requestAnimationFrame(function () {  
                                    // ctx.fillStyle = "#fff";  
                                    // ctx.fillText(text[text.length - 1].text,text[text.length - 1].marginLeft,yPosition);  
                                    // ctx.fillStyle = "#c01c1d";  
                                    // ctx.fillText(text[text.length - 1].text,text[text.length - 1].marginLeft,yPosition);  
                                //});  
  
                            }  
                              
                            index++;  
                            if(index == text.length){  
                                setTimeout(function () {  
                                    ctx.fillStyle = "#fff";  
                                    ctx.fillText(text[text.length - 1].text,text[text.length - 1].marginLeft,yPosition);  
                                    ctx.fillStyle = "#c01c1d";  
                                    ctx.fillText(text[text.length - 1].text,text[text.length - 1].marginLeft,yPosition);  
                                },TIMER);  
  
                                setTimeout(function () {  
                                    draw(0);  
                                },1000);  
                                  
                                // setTimeout(function () {  
                                // ctx.fillStyle = "#f2d";  
                                // ctx.fillText(text[index - 1].text,text[index -1].marginLeft,yPosition);  
                                // },30);  
                                // index = 0;  
                                // draw();  
                            }else{  
                                draw(index);  
                            }  
                            //draw();  
                        }  
                    }  
                }(index),TIMER - Math.floor(Math.sin(index) * 20));  
  
  
            }  
  
            draw(0);  
  
            // setInterval(function () {  
            //  //清空  
            //  index = 0;  
            //  draw();  
            // },400);  
  
  
  
            //ctx.fillText(text[2].text,text[2].marginLeft,yPosition);  
  
  
  
  
  
              
              
  
  
  
        </script>  
    </body>  
  
</html>

猴子的时光机

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制字体动画特效

<!doctype HTML> <html> <meta charset="utf8"/> <title>canvas test</title> <meta name="description" content=""> <meta name="HandheldFriendly" content="True"> <meta name="MobileOpti.
复制链接

扫一扫