翻译转换翻译（）
转换的翻译，奇怪的名字，是位移的一般模式。例如，我想移动的矩形（100100）至（200200）点。所以我只加context.translate（100100）在绘制矩形。

这里的翻译（）只介绍了两个参数，这实际上是新画布坐标系统的原点坐标。

xml代码将内容复制到剪贴板。






平移变换

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

context.fillstyle =# 00aaaa ；
（100100200100）context.fillrect；

context.fillstyle =红色；
（100100）context.translate；
（100100200100）context.fillrect；

}；







运行结果：


这里的蓝色矩形是矩形的初始位置，然后调用翻译（）方法，矩形移动到（200200），红色矩形的位置。


是的，事实上，这里是翻译的实质，在翻译的坐标，和翻译（）参数，一个新的坐标系统的本质是旧的坐标系的起源，这使我们仍然是一个红色矩形绘制在（100100），和平移坐标系后，我们改变为（200200）。

注意国家保存的使用：
事实上，有一个坑。如果我们想将矩形移动到（300300）该怎么办也许我们会认为context.translate直接打电话（200200）是OK.OK，咱们在效果上看。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






平移变换

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

context.fillstyle =# 00aaaa ；
（100100200100）context.fillrect；

context.fillstyle =红色；
（100100）context.translate；
（100100200100）context.fillrect；

context.fillstyle = 绿色；
（200200）context.translate；
（100100200100）context.fillrect；

}；







运行结果：


这里的绿色矩形不在（300300）的位置，我们希望，但这里（400400）。为什么你一定知道答案mdash；mdash；画布是基于状态图。我们的第一个翻译后，坐标系（100100）已到位，所以如果你继续这样翻译，基于新的坐标系统，坐标系统的转换。因此如何解决呢这很简单。有两种方法。

首先，在每次使用转换之后，记住将坐标系统移回到原来的点，即，调用转换（x，y）。

其次，利用context.save（）在每次翻译，并使用context.restore（）在每个图。

记住，不要想我继续后的第一次翻译和翻译的翻译（100100）不就行了，这个坐标系统将是一个混乱的自己，根本无法找到自己所在的坐标系的原点，几个转换或封装功能后将坑死你。因此，我们必须采取的初始状态作为最基本的参考，这是一个原则问题。在这里我建议使用二方法，并处理所有的图形变换，不仅翻译转换。

具体用途如下。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






平移变换

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

context.fillstyle =# 00aaaa ；
（100100200100）context.fillrect；

context.save（）；
context.fillstyle =红色；
（100100）context.translate；
（100100200100）context.fillrect；
context.restore（）；

context.save（）；
context.fillstyle = 绿色；
（200200）context.translate；
（100100200100）context.fillrect；
context.restore（）；

}；







运行结果：


因此，在使用图形变换时，记得要使用状态保存。


旋转变换旋转（）

作为一个画弧、旋转（DEG）参数这里有弧度，没有角。同时，需要注意的是，旋转是顺时针旋转的坐标系统的中心重要（0, 0）。因此，在使用旋转（），它通常需要使用翻译（）确定中心的旋转中心平移坐标系。换句话说，旋转变换通常用于平移变换。

最后一点需要注意的是，画布是基于状态的渲染，所以每个旋转最后是基于旋转继续旋转，所以当使用图形转换必须保存（恢复）和配置（）方法时，重置旋转角度，另一方面，重置坐标原点。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。






旋转变换

体{背景：URL（， /图像/ BG3 .jpg）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}





你的浏览器不支持画布让我们换一个！




在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；


对于（var i = 0；i < 12；i + +）{
context.save（）；
context.translate（70 + 50, 50 + 40 *我*我）；
context.fillstyle =# 00aaaa ；
context.fillrect（0,0,20,20）；
context.restore（）；

context.save（）；
context.translate（70 + 50, 50 + 40 *我*我）；
context.rotate（我* 30 * math.pi / 180）；
context.fillstyle =红色；
context.fillrect（0,0,20,20）；
context.restore（）；
}

}；







运行结果：


这里我们使用for循环来绘制14对方块，其中蓝色是广场前的旋转，而红色是平方后转动。每个旋转与广场的左上角的顶点为原点旋转。每张图纸包裹保存（）和恢复（），移动坐标系统，在每个旋转。童鞋们可以自己动手，在实践中，可以实现旋转变换的奥秘。