坐标的移动 · 前端速查手册

>[success] # 坐标的移动 ~~~ 坐标变换 1.平移移动画布的原点 translate(x,y) 参数表示移动目标点的坐标 2.缩放 scale(x,y) 参数表示宽高的缩放比例 3.旋转 rotate(angle) 参数表示旋转角度 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); //ctx.translate(100,100); //ctx.scale(0.5,1); //ctx.rotate(Math.PI/6); var startAngle = 0; ctx.translate(150,150); setInterval(function () { startAngle += Math.PI/180; ctx.rotate(startAngle); ctx.strokeRect(-50,-50,100,100); },500); </script> </body> </html> ~~~