2024年最新html5基础入门教程之canvas变型(1)，Web前端面试吃透这一篇就没有拿不到的offer-CSDN博客

本文链接：https://blog.csdn.net/2401_84411822/article/details/138897014

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

save()和 restore()方法是用来保存和恢复canvas状态的，都没有参数。

Canvas状态是以堆(stack)的方式保存的，每一次调用save()方法，当前的状态就会被推入堆中保存起来。这种状态包括：

当前应用的变形（即移动，旋转和缩放，见下）
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
当前的裁切路径（clipping path）

可以调用任意多次save()方法。

每一次调用restore()方法，上一个保存的状态就从堆中弹出，所有设定都恢复。

看一个save()和restore()方法的例子：

save-restore

function draw(){

var canvas=document.getElementById(‘test_save_restore’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.fillRect(15,15,150,150); //先绘制一个150*150的正方形，默认填充黑色

ctx.save(); //保存当前状态

ctx.fillStyle=‘#09f’; //设置填充色为蓝

ctx.fillRect(30,30,120,120); //绘制一个起始点坐标为(12,12)的120*120的正方形。它的背景色就是之前设置的蓝色。

ctx.save(); //保存当前状态

ctx.fillStyle=‘#fff’; //设置填充色为白色

ctx.globalAlpha=0.5; //透明度设置为0.5

ctx.fillRect(45,45,90,90); //绘制正方形

ctx.restore(); //恢复栈中的第一个状态值，即最后一个保存的状态，为设置填充色为蓝色

ctx.fillRect(60,60,60,60); //绘制60*60的蓝色正方形

ctx.restore(); //恢复栈中的第二个值，在本例中即第一个保存的状态，填充色默认为黑色

ctx.fillRect(75,75,30,30); //绘制一个30*30的黑色正方形

}

这个例子第一步是绘制了一个起始位置坐标为(15,15)，大小为150*150的正方形。它没有设置填充色，默认填充了黑色。第二步调用了save()方法。该方法记录了这是的状态，即fillStyle的值，即为默认的黑色。第三步设置fillStyle值为’#09f’，以此为填充色绘制了一个起始位置坐标为(30,30)，大小为120*120的正方形。第四步又调用了一次save()方法，此时的状态也将被推入状态栈中，即保存了填充色’#09f’。第五步绘制了一个起始坐标为(45,45)、背景色为白色、透明度为0.5、大小为90*90的正方形。第六步调用restore()方法，恢复最后一次保存的状态，绘制了一个蓝色正方形，它的起始位置为(60,60)，大小为60*60。最后又调用了一次restore()方法，恢复第一次保存的状态，绘制了一个黑色正方形，它的起始位置为(75,75)，大小为30*30.

移动

在canvas中用于移动的方法是translate()方法，该方法用来移动canvas和它的原点到一个不同的位置。

translate(x,y);

该方法有两个参数，分别x方向和y方向的偏移量。

看一个translate()方法的例子：

translate