❑ save:用来保存Canvas的状态。save之后,可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
❑ restore:用来恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。
save和restore要配对使用(restore可以比save少,但不能多),如果restore调用次数比save多,会引发Error
通俗地讲,canvas中的context.save()就是保存之前的画布状态,然后相当于在一块新画布上进行操作,不用担心影响save()之前的画布。
在经过restore()方法之后,就相当于还原了画布,如果之前经历过一次save,那么这时候restore()就相当于把两个画布合并了。前两个画布的内容就相当于处在同一个环境上了。再进行save()的话,就相当于把前两次的画布内容保存,重新又在一块画布上进行绘画。。。
可以通过以下代码来更清楚的理解这两个方法:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>canvas的save和restore</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//创建一个画矩形的方法
function drawRect(context,color){
context.fillStyle = color;
context.fillRect(0,0,100,30);
}
//创建一个旋转的函数
function rotatDeg(context,deg){
var rad = deg*Math.PI/180;
context.rotate(rad);
}
//绘制普通的矩形
drawRect(ctx,"red");
//指定移动,旋转后绘图
ctx.save(); //保存前面绘制的矩形状态
ctx.translate(100,30); //将画布的坐标原点移到(100,30)处
rotatDeg(ctx,45); //进行旋转
drawRect(ctx,"blue"); //绘制矩形
ctx.restore(); //恢复状态
//指定移动,旋转后绘图
ctx.save(); // 保存前面的状态
ctx.translate(200,50); //移动基点,将画布的中心移到坐标(200,50)处
rotatDeg(ctx,90); //旋转90度
drawRect(ctx,"green"); //绘制矩形
ctx.restore(); //恢复状态
}
</script>
</head>
<body>
<canvas id = "canvas" style = "width:300px ;height:300px"></canvas>
</body>
</html>
效果图如下
canvas的左上角为坐标原点。在画第一个红色的矩形时,由于没有调整基点的位置,所以就在(0,0)也就是canvas画布的左上角位置绘出了一个长为100,宽为30的红色矩形。
然后绘制第二个蓝色的矩形时进行了一次save().对上一个红色的画布环境进行了保存。此时通过ctx.translate(100,30); 将画布的坐标原点移到了(100,30)处,即(100,30)在当前环境中就相当于(0,0)点。然后调用画矩形的函数drawRect(ctx,”blue”),因为在函数drawRect中,绘制矩形是以(0,0)为原点,绘制的旋转45度的矩形,然后restore()恢复最初的画布环境。
第三个矩形时,对前面的环境又进行了save。然后通过将画布的坐标原点移到(200,50)处,旋转90度,再绘制绿色的矩形。完成后恢复最初的画布环境。
如果不用save和restore会是什么样的效果图?
//绘制第一个矩形
drawRect(ctx,”red”);
//指定移动,旋转后绘图
ctx.translate(100,30); //将画布的坐标原点移到(100,30)处
rotatDeg(ctx,45); //进行旋转
drawRect(ctx,"blue"); //绘制矩形
//指定移动,旋转后绘图
ctx.translate(200,50);
//移动画布的原点,原点不是移动到了(200,50)处,而是相对于点 (100,30)(因为此时这个点才是画布的原点),向右移动了200像素,向下移动了50像素,就相当于移出了画布外
rotatDeg(ctx,90); //旋转90度
drawRect(ctx,"green"); //绘制矩形
}
效果图是这样。为什么绿色的矩形不见了?
因为在画第二个图形时,没有保存第一个画布的环境,而直接将画布的原点移动到了(100,30)处。再绘制第三个图形时,将坐标原点不是移动到了(200,50)处,而是相对于点(100,30)(因为此时这个点才是画布的原点),向右移动了200像素,向下移动了50像素,就相当于移出了画布外,所以看不到。