🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 平移 ~~~ ctx.translate(0,100); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.stroke(); ~~~ > translate(x,y)平移的是坐标系的原点。beiginPath不会清空坐标系原点的变换 ## 旋转 ~~~ ctx.rotate(Math.PI/ 4); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.strokeStyle = "#F00"; ctx.lineWidth = 5; ctx.stroke(); ~~~ ![旋转之前](https://box.kancloud.cn/368eec32fd4d0a355194bb6614eba9a0_253x194.png) ![旋转之后](https://box.kancloud.cn/43f609230604cdd7b02b967deffa8231_224x226.jpg) > rotate(旋转角度)坐标系旋转角度 ## 缩放 ~~~ ctx.translate(0, 100); ctx.rotate(Math.PI / 4); ctx.scale(1, 0.5); ctx.fillRect(0,-100,100,100); ~~~ > scale(x轴缩放比例,y轴缩放比例) > 图形变换效果是会叠加的**************************************