-1

如何使画布上的文本移动动画更流畅（不那么锯齿状的运动）？

页面完全按照我想要的方式运行，除了文本的运动非常参差不齐。我怎样才能让它以这种速度运行更顺畅？

代码： 

<style>
               #cvs {
                   position: absolute; 
                   top: 0px;
                   left: 0px;
               }
           </style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
        <script type="text/javascript">
            var context;
            var text = "";
            var textDirection ="";

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

                textDirection ="right";
                textXpos = 5;
                text = "This is my video..";    
            });  

            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 = 'white';
                context.textBaseline = 'top';
                context.fillText  ( text, textXpos, 440);    
              }  
              </script>
          </head>
          <body> 
             <div id="page">
        <video id="video" autoplay loop>
          <source id='mp4'
            src="http://media.w3.org/2010/05/sintel/trailer.mp4"
            type='video/mp4'>
          <source id='webm'
            src="http://media.w3.org/2010/05/sintel/trailer.webm"
            type='video/webm'>
          <source id='ogv'
            src="http://media.w3.org/2010/05/sintel/trailer.ogv"
            type='video/ogg'>
          <p>Your user agent does not support the HTML5 Video element.</p>
        </video>
                <canvas id="cvs" width="500" height="500">
                   Your browser does not support the HTML 5 Canvas. 
                </canvas>
             </div>
          </body>
       </html>
4

1 回答 1

4

通过减少动画功能的间隔时间。您当前将其设置为每 360 毫秒调用一次，即每秒少于 3 帧。将其设置在 20 到 40 之间以获得流畅的动画效果。

于 2013-03-19T14:48:36.307 回答