Question

我正在使用html制作游戏，我需要旋转一个画布对象，矩形的底部作为中心点，但是我不确定这是否可以通过rotate方法。关于如何使这个工作的任何想法？感谢。

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

您不需要使用beginPath和填充矩形，您可以使用fillRect或strokeRect。如果设置转换，也可以避免有时缓慢的保存和恢复功能。如果您只使用setTransform，则除了剪切之外，您不需要使用保存和恢复。

更快的代码版本。

// 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
}

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

2 个答案: