企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
## 平移 ~~~ 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轴缩放比例) > 图形变换效果是会叠加的**************************************