canvas图片旋转90度,canvas图片移动
平移变换translate()平移变换，因此得名，就是一般的图形位移。例如，这里我想将位于(100，100)点的矩形平移到(200，200)点。然后我只需要在画矩形之前添加context.translate(100，100)即可。
这里的Translate()只传入两个参数，实际上是新画布坐标系原点的坐标。结合下面的代码看看效果。
XML/HTML代码将内容复制到剪贴板！Doctype HTML HTML lang= zh head元字符集= UTF-8 标题翻译转换/标题样式正文{background: URL(。/images/bg3.jpg )重复；} # canvas { border:1 px solid # aaaaaa；显示：块；保证金：50pxauto}/style/headbydivid= Canvas-warp Canvas id= Canvas 你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . fill style= # FFF ；context.fillRect(0，0，800，600)；context . fill style= # 00 AAAA ；context.fillRect(100，100，200，100)；context.fillStyle= redcontext.translate(100，100)；context.fillRect(100，100，200，100)；};/script/body/html运行结果：
这里的蓝色矩形是矩形的原始位置，然后调用translate()方法将矩形移位到(200，200)，也就是红色矩形的位置。我们来看一张图，看看它是如何进行平移和变换的。
是的，其实这里的平移变换本质上就是平移坐标系，传入translate()的参数本质上就是新坐标系相对于旧坐标系的原点。这使得我们仍然是画在(100，100)处的红色矩形，平移坐标系后，变为(200，200)。
注意保存使用状态：
其实这里有个坑。如果要把矩形平移到(300，300)应该怎么做？我们可能会想，直接调用context.translate(200，200)就行了。好了，来看看效果吧。
将JavaScript代码内容编码到剪贴板！Doctype HTML HTML lang= zh head元字符集= UTF-8 标题翻译转换/标题样式正文{background: URL(。/images/bg3.jpg )重复；} # canvas { border:1 px solid # aaaaaa；显示：块；保证金：50pxauto}/style/headbydivid= Canvas-warp Canvas id= Canvas 你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . fill style= # FFF ；context.fillRect(0，0，800，600)；context . fill style= # 00 AAAA ；context.fillRect(100，100，200，100)；context.fillStyle= redcontext.translate(100，100)；context.fillRect(100，100，200，100)；context.fillStyle= greencontext.translate(200，200)；context.fillRect(100，100，200，100)；};/script/body/html运行结果：
这里的绿色矩形不是我们预期的(300，300)位置，而是这里的(400，400)。为什么？你肯定已经知道答案——Canvas是基于状态的渲染。我们第一次平移后，坐标系已经在(100，100)了，所以如果继续平移，我们会继续平移基于新坐标系的坐标系。那么如何解决呢？很简单，有两种方法。
第一，每次使用transform后，记得把坐标系平移回原点，也就是调用translate(-x，-y)。
其次，在每次翻译前使用context.save()，在每次绘图后使用context.restore()。
记住，不要以为我第一次平移完就要马上继续平移(100，100)，这样你自己的坐标系就会混乱，根本找不到你坐标系的原点。经过多次转换或封装功能，你会被杀死。所以，以初始状态为最根本的参照物是原则问题。在这里，我建议使用第二种方法，当涉及到所有的图形变换时，都应该这样处理，而不仅仅是平移变换。
具体用法如下。
将JavaScript代码内容编码到剪贴板！Doctype HTML HTML lang= zh head元字符集= UTF-8 标题翻译转换/标题样式正文{background: URL(。/images/bg3.jpg )重复；} # canvas { border:1 px solid # aaaaaa；显示：块；保证金：50pxauto}/style/headbydivid= Canvas-warp Canvas id= Canvas 你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . fill style= # FFF ；context.fillRect(0，0，800，600)；context . fill style= # 00 AAAA ；context.fillRect(100，100，200，100)；context . save()；context.fillStyle= redcontext.translate(100，100)；context.fillRect(100，100，200，100)；context . restore()；context . save()；context.fillStyle= greencontext.translate(200，200)；context.fillRect(100，100，200，100)；context . restore()；};/script/body/html运行结果：
因此，在使用图形转换时，记得使用状态保存。
旋转变换rotate()
和画圆弧一样，这里rotate(deg)传入的参数是弧度，不是角度。同时需要注意的是，这个旋转是以坐标系原点(0，0)为中心的顺时针旋转。所以在使用rotate()之前，通常需要使用translate()来平移坐标系，确定旋转的中心。也就是说，旋转变换通常与平移变换结合使用。
最后需要注意的是，Canvas是基于状态绘制的，所以每次旋转都是在上一次旋转的基础上继续旋转。因此，必须使用save()和restore()方法，一方面重置旋转角度，另一方面重置坐标系的原点。
将JavaScript代码内容编码到剪贴板！Doctype HTML HTML lang= zh head元字符集= UTF-8 标题旋转转换/标题样式正文{background: URL(。/images/bg3.jpg )重复；} # canvas { border:1 px solid # aaaaaa；显示：块；保证金：50pxauto}/style/headbydivid= Canvas-warp Canvas id= Canvas 你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . fill style= # FFF ；context.fillRect(0，0，800，600)；for(vari=0；i=12I){ context . save()；context.translate(70 i*50，50i * 40)；context . fill style= # 00 AAAA ；context.fillRect(0，0，20，20)；context . restore()；context . save()；context.translate(70 i*50，50i * 40)；context.rotate(i*30*Math。PI/180)；context.fillStyle= redcontext.fillRect(0，0，20，20)；context . restore()；} };/script/body/html运行结果：
这里用for循环画了14对方块，蓝色是旋转前的方块，红色是旋转后的方块。每次旋转都以正方形左上角的顶点为原点。每个图形都由save()和restore()包裹，每次旋转前都会移动坐标系。童鞋可以自己操作，加上练习，可以体会到旋转变换的奥秘。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。