平移就是将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>效果图
上面的效果图我们可以看到，第一个矩形位置在（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原点在画布的（150,150）处！
还有注意一点就是，这个移动是对整个Canvas里的所有元素而言的，并不是对一个元素！！！
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
