有没有办法围绕底点而不是中心点旋转画布对象

Question

I am making a game using html, and I need to rotate a canvas object with the bottom of the rectangle as the centerpoint, however i'm not sure if this is possible through the rotate method. Any ideas on how to get this working? Thanks.

function drawRotatedRect(x, y, width, height, degrees, color) {
    context.save();
    context.beginPath();
    context.translate(x + width / 2, y + height / 2);
    context.rotate(degrees*Math.PI/180);
    context.rect(-width / 2, -height / 2, width, height);
    context.fillStyle = color;
    context.fill();
    context.restore();}

Answer 1

它与创建矩形的前2个参数有关，已经解决了

Answer 2

You don't need to use beginPath and and fill for rectangle you can use fillRect or strokeRect. Also you can avoid the sometime slow save and restore functions if you set the transform. If you only use setTransform you will not need to use save and restore for anything but clipping.

A quicker version of your code.

// where centerX and centerY is where the rotation point is on the rectange    
function drawRotatedRect(x, y, width, height, centerX, centerY, rotation, color) {
    context.setTransform(1, 0, 0, 1, x, y);
    context.rotate(rotation);
    context.fillStyle = color;
    context.fillRect(-centerX, -centerY, width, height);
    context.setTransform(1, 0, 0, 1, 0, 0); // restore default Only needed if 
                                            // you transform not using setTransform 
                                            // after this call
}