2、Canvas图形的变化（平移，缩放，旋转）

注：保存与恢复canvas状态

ctx.save();暂时将当前的状态保存到堆中

ctx.restore();该方法用于将上一个保存的状态从堆中再次取出，恢复该状态的所有设置。

1、移动坐标空间 translate()

实例

在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：

 

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

 

定义和用法

translate() 方法重新映射画布上的 (0,0) 位置。

注意：当您在 translate() 之后调用诸如 fillRect() 之类的方法时，值会添加到 x 和 y 坐标值上。

JavaScript 语法：

context.translate(x,y);

2、旋转rotate()

定义和用法

rotate() 方法旋转当前的绘图。

JavaScript 语法：

context.rotate(angle);

参数：

angle

描述：

旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

3、缩放rotate()

实例

绘制矩形，放大到 200%，然后再次绘制矩形：

 JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

定义和用法

scale() 方法缩放当前绘图，更大或更小。

注释：如果您对绘图进行缩放，所有之后的绘图也会被缩放。定位也会被缩放。如果您 scale(2,2)，那么绘图将定位于距离画布左上角两倍远的位置。

JavaScript 语法：

context.scale(scalewidth,scaleheight);

参数值

参数	描述
scalewidth	缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight	缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

 

 

 

更多实例

绘制一个矩形；放大到 200%，再次绘制矩形；放大到 200%，然后再次绘制矩形；放大到 200%，再次绘制矩形：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

 

转载于:https://www.cnblogs.com/hamigua/p/5512845.html