您的位置：首页 > 其它

Canvas添加一个背景图片，让字体在背景图片上从左向右滚动

2013-08-02 13:30 369 查看

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      canvas {
        border:1px solid #ccc;
      }
    </style>
    <body>
      <canvas id="canvas" width="450" height="360"></canvas>
      <script>
        var canvas = document.getElementById("canvas"),
            r = 10,
            ctx = canvas.getContext("2d"),
            img = new Image();
            
        img.src = "http://images.17173.com/2010/newgame/2010/07/08/allan07081500_11s.jpg";
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
        }
        
        var moveToRight = function() {

          ctx.drawImage(img, 0, 0);
          ctx.globalCompositeOperation = "source-over";
          ctx.font = "30px 黑体";
          ctx.textAlign = "center";
          ctx.fillStyle = "#000000";
          ctx.fillText("textAlign=center", r, 200);
          r = r + 10;
        }
        setInterval(moveToRight, 200);
      </script>
    </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航