书小宅之网页设计——canvas状态的保存save与恢复restore

书小宅

已于 2022-07-13 10:27:15 修改

阅读量625

点赞数

分类专栏：前端文章标签：旋转画布单一元素 save和resore

于 2019-07-25 22:49:35 首次发布

本文链接：https://blog.csdn.net/qq_36447261/article/details/97259601

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

save

Canvas状态是以堆（stack）的方式保存的，每一次调用save（方法，当前的状态就会被推入堆中保存起来，这种状态包括：当前应用的变形（即移动，旋转和缩放等）：strokeStyle（笔触的颜色、渐变或模式）
fillStyle（填充绘画的颜色、渐变或模式）
globalAlpha（绘图的当前透明度值0-1）
lineWidth（当前线条的宽度）
lineCap（线条末端线帽的样式）
lineJoin（当两条线交汇时，边角的类型）
miterLimit（最大斜接长度）
shadowOffsetX（形状与阴影的水平距离）
shadowOffsetY（形状与阴影的垂直距离）
shadowBlur（阴影的模糊级数）
shadowColor（阴影的颜色）
globalCompositeOperation（设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上）的值。

restore()

restore()方法将绘图状态置为保存值。

示例

不使用store()和restore()方法时旋转画布，画布中其他对象也跟着移动。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旋转画布</title>
<style>
   #myc{display:block; margin :auto; border: 1px solid #777;background-color:#FFC}
</style>
</head>

<body>
<canvas id="myc" width="300" height="300">您的浏览器不支持此功能</canvas>

<script>
var c=document.getElementById("myc");
var ctx=c.getContext("2d");
var x=80,y=200,r=50;
//加载图片，要声明一个图片对象
var img=new Image();
   img.src="image/save.jpg";
   	//保证图片事先正常载入
   img.onload=function(){
   //使用绘画方法,将图片的左上角放在(0,0)
   	ctx.drawImage(img,0,0);
   }
   ctx.rotate(10/180*Math.PI);
   ctx.beginPath();
   //画圆
   ctx.arc(x,y,r,0,2*Math.PI);
   ctx.stroke();
   //画方形
   ctx.strokeRect(x,y,r,r);
   ctx.stroke();
</script>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绘图时旋转单一对象</title>
<style>
   #myc{display:block; margin :auto; border: 1px solid #777;background-color:#FFC}
</style>
</head>

<body>
<canvas id="myc" width="300" height="300">您的浏览器不支持此功能</canvas>

<script>
var c=document.getElementById("myc");
var ctx=c.getContext("2d");
var x=80,y=200,r=50;
//加载图片，要声明一个图片对象
var img=new Image();
   img.src="image/save.jpg";
   	//保证图片事先正常载入
   img.onload=function(){
   //使用绘画方法,将图片的左上角放在(0,0)
   	ctx.drawImage(img,0,0);
   }
   
   //保存调用save方法前canvas的状态，即坐标原点在(0,0)处的状态
   ctx.save();
   //默认情况下沿着画布的左上角进行旋转，移动旋转轴点到圆心(x,y)
   ctx.translate(x,y);
   //以(x,y)为轴心旋转画布45度，使得水滴的尖部朝下
   ctx.rotate(45/180*Math.PI);
   ctx.beginPath();
   //画圆
   ctx.arc(0,0,r,0,2*Math.PI);
   ctx.stroke();
   //画方形
   ctx.strokeRect(0,0,r,r);
   ctx.stroke();
   //恢复左上角是(0,0)时候的状态
   ctx.restore();
   
</script>
</body>
</html>