《JS原理、方法与实践》- canvas作图(五)- 环境的保存和恢复

简介: 《JS原理、方法与实践》- canvas作图(五)- 环境的保存和恢复

在绘图的过程中经常需要对环境进行设置,例如填充样式、描边,在操作完之后,往往需要恢复到原来的环境,CanvasRenderingContext2D中可以使用save和restore方法快速操作。

环境的保存和恢复还可以进行多层嵌套。多次使用save方法可以创建多个保存点,每次调用restore方法都会按save相反的顺序获取所保存的环境。

实例:

```html

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

</head>

<body>

   <canvas id="c2d" width="600" height="600">浏览器不支持canvas</canvas>

   <script>

       const canvas = document.querySelector('#c2d');

       if(canvas.getContext) {

           const ctx = canvas.getContext('2d');

           ctx.save();

           ctx.fillStyle = 'red';

           ctx.fillRect(0,0,100,100);

           ctx.restore();

           ctx.fillRect(100,100,100,100);

       }

   </script>

</body>

</html>

```

![运行结果](https://upload-images.jianshu.io/upload_images/2789632-81a76884cda59b34.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

目录
相关文章
|
22天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-方法
文章通过示例代码讲解了JavaScript中如何给对象添加方法以及如何调用这些方法。
18 2
JavaScript基础知识-方法
|
17天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
8天前
|
SQL JavaScript 数据库
sqlite在Windows环境下安装、使用、node.js连接
sqlite在Windows环境下安装、使用、node.js连接
|
2天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
22天前
|
JavaScript 算法 前端开发
JS算法必备之String常用操作方法
这篇文章详细介绍了JavaScript中字符串的基本操作,包括创建字符串、访问特定字符、字符串的拼接、位置查找、大小写转换、模式匹配、以及字符串的迭代和格式化等方法。
JS算法必备之String常用操作方法
|
22天前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
1天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
|
1天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
2天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法