在画布上的某个特定位置，从左到右缓慢地绘制图像

Draw an image on a canvas slowly, left to right, in a particular place on the canvas

本文关键字：从左到右 位置 缓慢 图像 绘制 定位      更新时间：2023-09-26

我已经加载了一个图像，所以我有一个image对象，我希望使用纯javascript在画布的特定坐标处从左到右慢慢绘制。我做动画没有困难。

我更喜欢创建一个符合现有逻辑的模式。从图像创建图案会强制第一个图像从坐标0,0开始，然后重复，但每次重复的原点可能不会落在我想要的图像坐标上，这是在运行时确定的。

非常感谢任何建议或替代方法。

您可以使用一个模式，并且仍然能够定义模式的（0,0）将在哪里：对于该使用translate（）：模式将在新的坐标系中具有其（,0），这意味着它也将被转换。

一个使用翻译模式的小演示：

http://jsbin.com/jeyeripu/1/edit?html，js，输出

把一个div放在图像上，用jQuery把它动画化怎么样？看看下面的解决方案：

<!DOCTYPE html>
<html>
  <head>
      <script src="jquery.min.js"></script>
      <style type="text/css">
        .box{
          width:300px;
          height: 300px;
          position: absolute;
        }
        #img {
          background-image: url(img.jpg);
          background-size: contain;
          z-index: 1;
        }
        #overlay{
          background-color:white;
          z-index: 2;
        }
      </style>
      <script type="text/javascript">
        jQuery(window).load(function() {
          $("#overlay").animate({
            width: "0"
          }, 5000, function() {
            // Animation complete.
            console.log("done");
          });
        });
      </script>
  </head>
  <body>
    <div class="box" id="overlay"></div>
    <div class="box" id="img"></div>
  </body>
</html>
相关文章：