translate平移,接受2个参数,分别是x和y轴平移位置,平移的是绘图原点,之后绘图的原点就是平移后的位置,之前的图位置不变
scale 缩放,接受2个参数,分别是x和y缩放系数,1是原来大小,也是对之后绘图影响,之前图没影响
rotate旋转,参数是旋转度数,顺时针
var cancans = document.getElementById("myCanvas"); //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); context.save()//保存状态,以便恢复 //平移 context.fillRect(0, 0, 50, 50); context.translate(100, 100); context.fillRect(0, 0, 50, 50); context.translate(100, 100); context.fillRect(0, 0, 50, 50); context.fillStyle = "red"; //平移缩放结合 context.translate(100, 100); //当前绘图原点(300,300) context.scale(1, 2); //x坐标不缩放,y坐标变成2倍 context.fillRect(0, 0, 50, 50); context.restore()//恢复状态,将绘图原点重置 context.fillStyle = "blue"; context.fillRect(0, 0, 25, 25); //旋转45度,默认是顺时针 context.translate(100, 100); context.rotate(Math.PI / 4); context.fillRect(50, 50, 50, 50);