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()的状态逐级向上寻找

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《canvas封闭状态及状态恢复
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!