导言:在画布中我们需要对绘制的图像进行移动,那么下面就是canvas来提供的一些方法
一、 translate() 平移
translate(x,y) 重新映射画布上的 (0,0) 位置
- x 沿x轴平移的距离
- y 沿y轴平移的距离
注意:translate平移的是原点,而不是直接平移线条。
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
// cxt.translate(0,100);
cxt.moveTo(0,0);
cxt.translate(0,100);
cxt.lineTo(100,100);
// cxt.translate(0,100);
cxt.stroke();
分析:把translate放在moveTo前面 相当于所有的坐标都是在平移后的坐标系下找到的
分析:把translate放在moveTo后面 把原点平移到(0,100)的情况下 那么初始的原点坐标不变 而(100,100)是在平移之后的坐标系里找到的。
放在lineTo后面 这个跟原始状态一样,因为进行平移原点之后,内存中所有的路径已经绘制完毕,不能产生影响了
二、rotate() 旋转
rotate(angle) 旋转当前绘图。
- 旋转角度,以弧度计算
注意:这里的旋转效果是可以叠加的 这里不会产生覆盖
三、scale() 缩放
scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小。
- scalewidth:宽度的缩放倍数
- scaleheight:高度的缩放倍数
四、综合案例
context.translate(250, 250);//移动坐标原点
//坐标变换
for(var i = 0; i < 30; i++) {
context.rotate(Math.PI/10,true);//旋转角度
context.scale(0.95,0.95);//缩小比例
context.beginPath();
context.fillStyle = "rgba(255,157,0,0.5)";
context.fillRect(100, 100, 120, 60);
context.closePath();
}