内容整理承接：
《# 数据可视化基础 - canvas进阶篇（二）：变换》
3.3 绘制环境保存和还原（重要）
-
ctx.save() 保存当前环境的状态
- 可以把当前绘制环境进行保存到缓存中。
-
ctx.restore() 返回之前保存过的路径状态和属性
- 获取最近缓存的ctx
-
一般配合位移画布使用。
3.4 设置绘制环境的透明度（了解）
- context.globalAlpha=number;
- number:透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
- 设置透明度是全局的透明度的样式。注意是全局的。
3.5 画布限定区域绘制（了解）
- ctx.clip(); 方法从原始画布中剪切任意形状和尺寸
- 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
- 一般配合绘制环境的保存和还原。
3.6 画布保存base64编码内容（重要）
-
把canvas绘制的内容输出成base64内容。
-
语法：canvas.toDataURL(type, encoderOptions) ;
-
例如：canvas.toDataURL("image/jpg",1);
-
参数说明：
- type，设置输出的类型，比如 image/png image/jpeg等
- encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。
案例1：
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
//"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
var img = document.querySelector("#img-demo");//拿到图片的dom对象
img.src = canvas.toDataURL("image/png"); //将画布的内容给图片标签显示
3.7 画布渲染画布（重要）
context.drawImage(img,x,y);
//img参数也可以是画布，也就是把一个画布整体的渲染到另外一个画布上。
var canvas1 = document.querySelector('#cavsElem1');
var canvas2 = document.querySelector('#cavsElem2');
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
ctx1.fillRect(20, 20, 40, 40); //在第一个画布上绘制矩形
ctx2.drawImage(canvas1, 10, 10); //将第一个画布整体绘制到第二个画布上
