canvas 存储与还原状态

2020-3-14 13:58| 作者: admin| 查看: 368| 评论: 0|来自: 蚂蚁部落

绘图中,有些状态可能会在未来某一个时刻会用到。

此时就需要将当前的存储起来,然后再需要的时候将其还原。

使用如下两个方法可以实现存储于还原状态功能:

(1).save():存储状态。

(2).restore():还原已存储的状态。

下面通过代码实例对两个方法的功能进行一下演示:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin:50px;
}
</style>
<script>
window.onload = ()=> {
  let cvs = document.getElementById("canvas");
  let ctx = cvs.getContext("2d");

  ctx.fillStyle = "rgba(255,0,0,1)";
  ctx.save();

  ctx.beginPath();
  ctx.rect(10,10, 50, 50);
  ctx.fill();

  ctx.fillStyle = '#0f0';
  ctx.fillRect(50, 50, 50, 50);

  ctx.restore();
  ctx.fillRect(90, 90, 50, 50);
} 
</script>
</head>
<body>
  <canvas id="canvas" width="200" height="150"></canvas>
</body>
</html>

上述代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/202003/14/135904xldeowg6zwzlf8ek.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面对代码进行一下分析:

[JavaScript] 纯文本查看 复制代码
let cvs = document.getElementById("canvas");
let ctx = cvs.getContext("2d");

通过document.getElementById("ant")获取<canvas>元素对象,也就是获取画布。

再利用<canvas>元素对象的getContext()方法获取绘图环境,具体参阅canvas getContext()一章节。

[JavaScript] 纯文本查看 复制代码
ctx.fillStyle = "rgba(255,0,0,1)";
ctx.save();

利用fillStyle属性设置填充颜色为rgba(255,0,0,1)。

然后调用save()可以将上述设置的状态保存起来,当然能够保存填充颜色。

[JavaScript] 纯文本查看 复制代码
ctx.rect(10,10, 50, 50);
ctx.fill();

通过上述代码绘制一个矩形,填充色是上面定义的rgba(255,0,0,1)。

[JavaScript] 纯文本查看 复制代码
ctx.fillStyle = '#0f0';
ctx.fillRect(50, 50, 50, 50);

重新定义填充颜色为#0f0。然后绘制第二个矩形,也就是呈现绿色的矩形。

[JavaScript] 纯文本查看 复制代码
ctx.restore();
ctx.fillRect(90, 90, 50, 50);

使用restore()方法可以还原之前存储的状态,自然填充色也会被重置为rgba(255,0,0,1)。

所以第三个矩形的颜色与第一个矩形的颜色相同。

相关阅读:

(1).save()可以参阅canvas save()一章节。

(2).restore()可以参阅canvas restore()一章节。


鲜花

握手

雷人

路过

鸡蛋
返回顶部