使用html5在canvas中移動文本

Question

我是html5開發的新手，任何人都可以告訴我如何將文本移動到畫布內的其他水平方向。

Answer 1

以下是如何在屏幕上來回顯示文本的示例：

<html>
   <head>
   <title>HTML 5 Animated Text</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var context;
        var text = "";
        var textDirection ="";

        $(function()
        {
            context = document.getElementById("cvs").getContext("2d");            
            setInterval("animate()", 30);

            textDirection ="right";
            textXpos = 5;
            text = "Animation!";    
        });  

        function animate() {            
            // Clear screen
            context.clearRect(0, 0, 500, 500);
            context.globalAlpha = 1;
            context.fillStyle = '#fff';
            context.fillRect(0, 0, 500, 500);    

            var metrics = context.measureText(text);
            var textWidth = metrics.width;

            if (textDirection == "right") {
                textXpos += 10;

                if (textXpos > 500 - textWidth) {
                    textDirection = "left";
                }
            }
            else {
                textXpos -= 10;

                if (textXpos < 10) {
                    textDirection = "right";
                }                    
            }

            context.font = '20px _sans';
            context.fillStyle = '#FF0000';
            context.textBaseline = 'top';
            context.fillText  ( text, textXpos, 180);    
          }    
          </script>
      </head>
      <body> 
         <div id="page">
            <canvas id="cvs" width="500" height="500">
               Your browser does not support the HTML 5 Canvas. 
            </canvas>
         </div>
      </body>
   </html>

在行動： http ： //jsfiddle.net/bS79G/

Answer 2

您還可以使用canvas store（），translate（）和restore（）方法為文本設置動畫。 假設您要將文本從右側移動到左側，則可以使用以下代碼段：

請參閱網站： http ： //www.authorcode.com/text-animation-in-html5/

var can，ctx，step，steps = 0，delay = 20;

    function init() {
        can = document.getElementById("MyCanvas1");
        ctx = can.getContext("2d");
        ctx.fillStyle = "blue";
        ctx.font = "20pt Verdana";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        step = 0;
        steps = can.height + 50;
        RunTextRightToLeft();
    }

    function RunTextRightToLeft() {
        step++;
        ctx.clearRect(0, 0, can.width, can.height);
        ctx.save();
        ctx.translate(can.width / 2, step);
        ctx.fillText("Welcome", 0, 0);
        ctx.restore();
        if (step == steps)
            step = 0;
        if (step < steps)
            var t = setTimeout('RunTextRightToLeft()', delay);
    }

使用html5在canvas中移動文本

問題描述

2 個解決方案

解決方案1
6 已采納 2012-07-12 11:04:59

解決方案2
1 2013-04-19 08:57:14

使用html5在canvas中移動文本

問題描述

2 個解決方案

解決方案1 6 已采納 2012-07-12 11:04:59

解決方案2 1 2013-04-19 08:57:14

解決方案1
6 已采納 2012-07-12 11:04:59

解決方案2
1 2013-04-19 08:57:14