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

2020-02-22 javascript html canvas

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

Answers

使用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>

Related