ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的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(); ~~~ ![旋转之前](images/15279068891.png) ![旋转之后](images/15279069321.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轴缩放比例) > 图形变换效果是会叠加的**************************************