主页 / 问题 / 1031260
Accepted
gdhury
Asked:2020-10-05 02:00:19 +0800 CST2020-10-05 02:00:19 +0800 CST

为什么画布旋转形状上的坐标偏移

  • 772
var canvas=document.getElementById("canvas");
if(canvas.getContext){
var ctx=canvas.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(90,50,30,20);

}}

矩形很好地偏离了开头的坐标

canvas

1 个回答

  1. Best Answer

    画布围绕原点旋转，点（0,0）是画布的左上角。

    在这种情况下，我会进行如下处理：

    1. 保存上下文状态
    2. 我将画布移动到图形的中心
    3. 我转动画布
    4. 我绘制形状就好像它位于点 (0.0) 周围
    5. 恢复上下文的状态

    var ctx = canvas.getContext("2d");

var rects = Array(12).fill(0).map((e,i) => [
  50+Math.random()*500, 
  25+Math.random()*125,
  Math.random()*40+10,
  Math.random()*20+5,
  i*30
]);

requestAnimationFrame(draw);

function draw(t){
  ctx.clearRect(-1111, -1111, 2222, 2222);
  rects.forEach((r, i) => {
    ctx.save();
    ctx.fillStyle=`hsl(${r[4]+t/100},55%,55%)`;
    ctx.translate(r[0]+r[2]/2, r[1]+r[3]/2);
    ctx.rotate(t/1000*(i+1));
    ctx.fillRect(-r[2]/2, -r[3]/2, r[2], r[3]);
    ctx.restore();
  });
  requestAnimationFrame(draw);
}
    <canvas id=canvas width=600 height=175>

    • 2

相关问题