4

私はhtml5の開発に慣れていないので、キャンバス内で一方の側をもう一方の側に水平に移動するテキストを作成する方法を誰かに教えてもらえますか..

4

2 に答える 2

6

画面上でテキストを前後にアニメーション化する方法の例を次に示します。

<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/

于 2012-07-12T11:04:59.177 に答える