我正在尝试在坐标点x,y处绘制图像,x和y位于图像的中心。
我之前找到的用于旋转图像的代码:
function drawImageRot(img,x,y,width,height,deg) {
//Convert degrees to radian
var rad = deg * Math.PI / 180;
//Set the origin to the center of the image
context.translate(x + width / 2, y + height / 2);
//Rotate the canvas around the origin
context.rotate(rad);
//draw the image
context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);
//reset the canvas
context.rotate(rad * ( -1 ) );
context.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}
然而,它似乎在下方和右侧绘制图像?即x,y坐标是否与图像的左上角有关?
答案 0 :(得分:3)
在该方法的开头,它将上下文从左上角转换为中心。 如果要传递图像的中心。然后,您可以跳过该步骤,生成以下代码。
function drawImageRot(img,x,y,width,height,deg) {
//Convert degrees to radian
var rad = deg * Math.PI / 180;
//Set the origin to the center of the image
context.translate(x, y);
//Rotate the canvas around the origin
context.rotate(rad);
//draw the image
context.drawImage(img, width / 2 * (-1), height / 2 * (-1), width, height);
//reset the canvas
context.rotate(rad * ( -1 ) );
//
context.translate((x) * (-1), (y) * (-1));
}
不要忘记您必须以与更改翻译相同的方式撤消翻译。
答案 1 :(得分:1)
如果你想给这个函数坐标而不是左上角,只需要替换
context.translate(x + width / 2, y + height / 2);
与
context.translate(x, y);
答案 2 :(得分:0)
派对迟到了,但我发现在渲染之前移动图像最简单。
function drawBorder(img, x, y, width, height, deg){
var xAdjust = width * .5,
yAdjust = height * .5;
ctx.drawImage(img, x - xAdjust, y - yAdjust, width, height);
}
如果您知道它经过的宽度和高度,您可以将图像向上移动一半大小并将其大小减半。快速而肮脏,但却有把戏。