canvas的转换方法

导言:在画布中我们需要对绘制的图像进行移动,那么下面就是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();
 }

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值