Canvas的平移操作（十一）

平移就是将2D渲染上下文的原点从一个位置移到一个位置！
不要以为你懂上面句话！！！上面这句话的原点注意一下，我们在最初的时候定义左上角为Canvas的原点，现在我们所谓的平移操作是移动了原点的位置，也就是整个画布移动了，现在原点位置相对左上角已经改变了，但是原点坐标还是（0,0）。还是不懂的话，看下面就会懂得！！

平移函数

context.translate(x,y)
参数x，y表示移动的x轴和y轴上移动的距离

先来看代码：

<!DOCTYPE html>     <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en">    <!-- 网页页面的根，其他元素均放在其中，只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
  <meta charset="UTF-8">    <!-- 编码方式  -->
  <title>Canvas高速入门</title>   <!-- 页面设置名称，显示在浏览器标题栏中 -->
  <!-- CSS 及 javascript 代码放置处 -->
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
  <script type="text/javascript">
    $(document).ready(function(){
      //alert("HELLO WORLD!!!")
      var canvas = $("#mycanvas");
      var context = canvas.get(0).getContext("2d");

      context.fillRect(150,150,100,100);

      context.translate(150,150);  //原点移到（0+150，0+150）

      context.fillStyle = "#a23412";
      //当前原点位置是（150,150），在这个基础上绘制，相当于在最初的画布context.fillRect(150+150,150+150,100,100)
      context.fillRect(150,150,100,100);
    });
  </script>
</head>
<body>  <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas"  style="background-color: #113344"></canvas>

</body>
</html>

效果图

Canvas的平移操作（十一）

上面的效果图我们可以看到，第一个矩形位置在（150,150），第二个矩形位置在（300,300）
那要如果第二个矩形位置为（0,0）会怎么样呢？？！
代码：

      context.fillRect(150,150,100,100);

      context.translate(150,150);  //原点移到（0+150，0+150）

      context.fillStyle = "#a23412";
      //当前原点位置是（150,150），在这个基础上绘制，相当于在最初的画布//context.fillRect(150+150,150+150,100,100)
      context.fillRect(0,0,100,100);

效果图：

Canvas的平移操作（十一）

你会发现第一个被覆盖掉了！！！说明此时Canvas原点在画布的（150,150）处！

还有注意一点就是，这个移动是对整个Canvas里的所有元素而言的，并不是对一个元素！！！

Canvas的平移操作（十一）

相关推荐