Question

所以我知道图像尖端的坐标。现在，我想旋转图像，使笔尖指向一些x和y坐标。那我该怎么做呢？我需要在此drawImage方法中更改参数吗？还是在JavaScript画布中有一种方法可以某种方式旋转我的图片？

Answer 1

使用rotate()变换坐标系，绘制图像，然后重置变换。

// utility to convert degress to radians
const d2r = d => d * Math.PI / 180;

// get the 2d context
const ctx = document.getElementById('c').getContext('2d');

// move origin to the point around which to rotate
ctx.translate(100, 100);

// rotate coordinate system 45°
ctx.rotate(d2r(45));

// draw whatever you need to draw
ctx.fillRect(-10, -10, 20, 20);

// reset the coordinate system
ctx.restore();

canvas {
  border: 1px solid black;
}

<canvas id="c" width="200" height="200"></canvas>

如何在Canvas HTML中绘制指向特定x和y坐标的图像

1 个答案: