Canvas 状态的保存和恢复实例【每日一段代码25】
2012-02-21 22:53
591 查看
<!DOCTYPE HTML>
<html>
<head>
<title> save restore</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillRect(0,0,150,150);//绘制一个矩形
cxt.save();//保存默认状态
cxt.fillStyle="#06f";//改变设置颜色
cxt.fillRect(15,15,120,120);//绘制新矩形
cxt.save();//保存当前状态
cxt.fillStyle="#FFF";//改变设置
cxt.globalAlpha=0.5;
cxt.fillRect(30,30,90,90);//绘制矩形
cxt.restore();//恢复前一个状态
cxt.fillRect(45,45,60,60);//按照前一个状态绘制矩形
cxt.restore();//恢复原始状态
cxt.fillRect(60,60,30,30);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas"></canvas>
</body>
</html>
显示效果如下:
【通过绘制多个矩形的例子来描述 canvas 的状态堆的工作原理。首先是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形,然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,工作量猛涨。当第二次调用 restore 时,已经恢复到最初的状态,因此最后是再一次绘制出一个黑色的四方形。】
<html>
<head>
<title> save restore</title>
<script type="text/javascript">
function draw(){
var cxt = document.getElementById("myCanvas").getContext("2d");
cxt.fillRect(0,0,150,150);//绘制一个矩形
cxt.save();//保存默认状态
cxt.fillStyle="#06f";//改变设置颜色
cxt.fillRect(15,15,120,120);//绘制新矩形
cxt.save();//保存当前状态
cxt.fillStyle="#FFF";//改变设置
cxt.globalAlpha=0.5;
cxt.fillRect(30,30,90,90);//绘制矩形
cxt.restore();//恢复前一个状态
cxt.fillRect(45,45,60,60);//按照前一个状态绘制矩形
cxt.restore();//恢复原始状态
cxt.fillRect(60,60,30,30);
}
</script>
</head>
<body onLoad="draw()">
<canvas id="myCanvas"></canvas>
</body>
</html>
显示效果如下:
【通过绘制多个矩形的例子来描述 canvas 的状态堆的工作原理。首先是用默认设置画一个大四方形,然后保存一下状态。改变填充颜色画第二个小一点的蓝色四方形,然后再保存一下状态。再次改变填充颜色绘制更小一点的半透明的白色四方形。到目前为止所做的动作和前面章节的都很类似。不过一旦调用 restore,状态堆中最后的状态会弹出,并恢复所有设置。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,工作量猛涨。当第二次调用 restore 时,已经恢复到最初的状态,因此最后是再一次绘制出一个黑色的四方形。】
相关文章推荐
- canvas save()和canvas restore()状态的保存和恢复使用方法及实例
- HTML5 Canvas 矩形【每日一段代码5】
- Android 保存Fragment 切换状态实例代码
- HTML5 Canvas透明【每日一段代码33】
- HTML5 Canvas 画圆【每日一段代码4】
- html5 canvas学习--canvas保存于恢复状态
- Vue中保存用户登录状态实例代码
- canvas 状态的保存和恢复 Saving and restoring state
- Canvas 状态的保存和恢复
- Html5 Canvas绘制锯齿形【每日一段代码29】
- canvas中的状态保存与恢复
- Canvas绘制路径:二次方曲线【每日一段代码11】
- Canvas运用样式与颜色fillStyle【每日一段代码15】
- HTML5 Canvas 绘制二次曲线【每日一段代码31】
- HTML5 Canvas 绘制云团 【每日一段代码35】
- Canvas绘制矩形的三个函数【每日一段代码7】
- Canvas基础3-绘图状态的保存与恢复
- Canvas绘制路径【每日一段代码8】
- Canvas引用缩放图像【每日一段代码14】
- Canvas createRadialGradient 线性渐变【每日一段代码22】