不使用ctx.save和ctx.restore的ctx.rotate()

Question

我希望避免每次调用绘图函数时都使用ctx.save()和ctx.restore()，只在需要时更改上下文设置。

这个想法不是将所有的上下文设置重置为0，而是检查每个设置是否需要更改，并根据其值进行更改。

(目的是检查在某些情况下，它是否比使用保存和还原更快。)

我试过这样做：

function draw_pic( pic_id , x , y , angle , scale , opacity )
{
    if( x!=previous_x || y!=previous_y )
    {   ctx.translate( x-previous_x , y-previous_y );
        previous_x = x ; previous_y = y ; }

    if( angle!=previous_angle )
    {   ctx.rotate( (angle-previous_angle) * Math.PI / 180 );
        previous_angle = angle ; }

    if( scale!=previous_scale )
    {   ctx.scale( scale , scale );
        previous_scale = scale ; }

    if( opacity!=previous_opacity )
    {   ctx.globalAlpha = opacity ;
        previous_opacity = opacity ; }

    ctx.drawImage( images_obj[pic_id] , - images_infos[pic_id].origin_x , - images_infos[pic_id].origin_y );
}

看起来一切正常，除了旋转部分。一旦我想要我的图像以不同的角度绘制，它们就会乱七八糟地在屏幕上跳来跳去……问题出在哪里？

我在web上找到的所有示例都使用save()和restore()，所以它们总是从0开始，我没有找到任何像我试图做的那样处理以前的值的示例。

Answer 1

将if语句中的"rotate“替换为"angle”可能非常容易。

之前：

if( rotate!=previous_angle ) {   
    ctx.rotate( (angle-previous_angle) * Math.PI / 180 );
    previous_angle = angle; 
}

之后：

if( angle!=previous_angle ) {   
    ctx.rotate( (angle-previous_angle) * Math.PI / 180 );
    previous_angle = angle; 
}