canvas封闭状态及状态恢复
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas封闭环境</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
canvas{
border:1px solid grey;
background: rgba(0,0,0,0.4)
}
</style>
</head>
<body>
<canvas width="900" height="500">
</canvas>
<script type="text/javascript">
var c=document.getElementsByTagName('canvas')[0];//获得画布
var cv=c.getContext('2d');//获得绘画环境
//开始绘画
cv.beginPath();
cv.moveTo(100,20);//起点
cv.lineTo(100,480);//终点
cv.strokeStyle='#26ffff';//线条颜色
cv.lineWidth=10;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态
//开始绘画
cv.beginPath();
cv.moveTo(100,480);//绘画起始点
cv.lineTo(300,0);//绘画结束位置
cv.strokeStyle='#001a2e';//线条颜色
cv.lineWidth=10;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态
//开始绘画
cv.beginPath();
cv.moveTo(300,0);//绘画起始点
cv.lineTo(900,500);//绘画结束位置
cv.strokeStyle='orange';//线条颜色
cv.lineWidth=5;//线条宽度
cv.stroke();//连线
cv.save();//保存当前的绘画状态
//开启路径
cv.beginPath();
//cv.restore()返回离自己最近的一次保存状态
cv.restore();//第一次的保存,最近
cv.restore();//第二次保存
cv.restore();//第三次保存
cv.moveTo(900,500);
cv.lineTo(800,0);
cv.stroke();
////
</script>
</body>
</html>使用context.save()会保存当前的线条颜色,宽度属性,进行多次保存,使用context.restore()恢复离之最近之前的状态,
多次调用restore()继续向上寻找sava()的状态逐级向上寻找
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-1-29，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读