平移：
在HTML5里，搞图形平移，有两个办法——矩阵法和函数法。先说函数法，只要给context的translate方法喂进去x和y轴的偏移值，就能让图形动起来。不过要注意，这招儿会影响后面的代码位置。想保住原来的样子？就用save和restore工具箱来存档和恢复！
context.fillRect(50,50,50,50); context.translate(100,100); context.fillRect(50,50,50,50);
让我教你怎么用矩阵来搞定平移！在’context’里，咱们有个叫’transform’的功能，它能玩转矩阵变换哟。这个功能有6个参数，前4个控制大小旋转，后面两个就是用来移动的。简单地说，1跟4就是X轴的大小，2和3就是Y轴的大小；至于5和6，就是往哪边走的距离。不过记住，别让矩形被压扁了，把对应的数字设成1就行。
缩放：
context.fillRect(50,50,50,50); context.transform(1,0,0,1,100,100); //context.transform(0,1,1,0,100,100); context.fillRect(50,50,50,50);
咱们在处理图片变化的时候，常常用到放大缩小这个小技巧，HTML5里也是这么玩的！你能找到一个叫做context的对象，里面藏着一个scale方法，只要给它输入我们想要放大或者缩小图形的比例就行。当然了，别忘了考虑下一步的旋转问题，所以最好先把图动一动，这样就能避免出岔子。
context.fillRect(50,50,50,50); context.translate(150,50); context.scale(0.5,0.5); context.fillRect(0,0,50,50);
用矩阵方法做放大缩小，就得用transform，然后输入特定的参数来搞定它。不过，这时候要注意，因为放大以后所有的坐标都变了，所以咱们得小心处理，别搞错了效果哈。
context.fillRect(50,50,50,50); context.scale(0.5,0.5); context.fillRect(150,50,50,50);
旋转：
你知道吗？图形转个弯挺有意思的，HTML5里面也能办得到！话说，用JavaScript把这个过程做出来的话，只需要用draw.rotate()函数，输入想要的转动度数(要用弧度表示)，就搞定。但是，在玩儿旋转前得先想好会不会有平移或缩小放大的情况出现哟~
让我来给你解释下！使用矩阵法来转图形的话，得用那个transform方法，然后把相应的参数给它设定好就行了。这个方法里，有两个参数是用来控制角度的，比如cos旋转角和sin旋转角这类的，调调它们就能搞定你要的转动效果。
说来说去，用HTML5画图变化就是要会平移、缩小和旋转，选啥方法就看你想要什么效果了。而且搞这些变化时，别忘了每个环节之间有什么联系，这样才能保证最后的结果是对的。
评论0