HTML5 canvas以一定角度绘制图像 [英] HTML5 canvas drawImage with at an angle

问题描述

我正在< canvas> 中试验动画，并且无法确定如何以某个角度绘制图像。所需的效果是像往常一样绘制一些图像，一个图像缓慢旋转。 （此图像不在屏幕的中心，如果这有任何区别）。

I am experimenting with animation in <canvas> and can't work out how to draw an image at an angle. The desired effect is a few images drawn as usual, with one image rotating slowly. (This image is not at the centre of the screen, if that makes any difference).

推荐答案

您需要修改转换在绘制想要旋转的图像之前的矩阵。

You need to modify the transformation matrix before drawing the image that you want rotated.

假设图像指向HTMLImageElement对象。

Assume image points to an HTMLImageElement object.

var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

x，y坐标是画布上图像的中心。

The x, y coordinates is the center of the image on the canvas.

这篇关于HTML5 canvas以一定角度绘制图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！