代码之家 › 专栏 › 技术社区 › Greg

HTML5画布绘图图像

drawimage html5 javascript

30

Greg · 技术社区 · 14 年前

我正在用动画做实验 <canvas>

3 回复 | 直到 14 年前

1

79

Jakub Wieczorek 14 年前

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

假设图像指向HTMLImageElement对象。

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坐标是画布上图像的中心。

2

14

Yaume 10 年前

我已经编写了一个函数(基于Jakub的答案),允许用户基于自定义旋转点的自定义旋转在X,Y位置绘制图像:

function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -angleInRad );
  context.translate( -positionX, -positionY );
}

你可以这样称呼它:

var TO_RADIANS = Math.PI/180; 
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src = "img/sprite.png";

// rotate 45Âº image "imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context "ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );

3

8

unrealsoul007 7 年前

有趣的是,第一个解决方案适用于这么多人,却没有给出我需要的结果。最后我不得不这么做:

ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

(positionX, positionY) 是画布上的坐标,我希望图像位于和 (x, y)