填充/描边颜色设置阴影缩放/位移/旋转画布画布保存base64编码内容画布渲染画布

填充和描边的颜色

fillStyle : 设置或返回用于填充绘画的颜色
strokeStyle: 设置或返回用于笔触的颜色

两者可能的值: 16进制数据，rgb值，甚至rgba. 一般先进行设置样式然后进行绘制。

      ctx.strokeStyle = "red";
      ctx.strokeStyle = "#ccc";
      ctx.strokeStyle = "rgb(255,0,0)";
      ctx.strokeStyle = "rgba(255,0,0,6)";

设置阴影

shadowColor：设置或返回用于阴影的颜色
shadowBlur：设置或返回用于阴影的模糊级别,大于1的正整数，数值越高，模糊程度越大
shadowOffsetX：设置或返回阴影距形状的水平距离

shadowOffsetY：设置或返回阴影距形状的垂直距离

      ctx.fillStyle = "rgba(255,0,0, .9)"
      ctx.shadowColor = "teal";
      ctx.shadowBlur = 10;
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
      ctx.fillRect(100, 100, 100, 100);
      //设置png图片的阴影，图片透明部分不会被投影。

变换

缩放
- context.scale(scalewidth,scaleheight) 缩放当前绘图，更大或更小
  - scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
  - scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
位移画布
- ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
  - x：添加到水平坐标（x）上的值
  - y：添加到垂直坐标（y）上的值
- 发生位移后，相当于把画布的0,0坐标更换到新的x,y的位置，所有绘制的新元素都被影响。
  位移画布一般配合缩放和旋转等。
旋转
- context.rotate(angle); 方法旋转当前的绘图
  - 注意参数是弧度（PI）
  - 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
绘制环境保存/还原-配合位移画布使用
- ctx.save() 保存当前环境的状态
  - 可以把当前绘制环境进行保存到缓存中。
- ctx.restore() 返回之前保存过的路径状态和属性
  - 获取最近缓存的ctx
设置绘制环境的透明度
- context.globalAlpha=number;
  - number:透明值。必须介于 0.0（完全透明）与 1.0（不透明）之间。
  - 设置透明度是全局的透明度的样式。注意是全局的。
画布限定区域绘制
- ctx.clip(); 方法从原始画布中剪切任意形状和尺寸
  - 一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）
  - 一般配合绘制环境的保存和还原。

画布保存base64编码内容

canvas.toDataURL(type, encoderOptions);canvas绘制的内容输出成base64内容。
例如：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");      //将画布的内容给图片标签显示

画布渲染画布

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);    //将第一个画布整体绘制到第二个画布上

创建线性渐变的样式-了解

语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0起始坐标，x1,y1结束坐标
一般不用，都是用图片代替，canvas绘制图片效率更高。
线性渐变可以用于矩形、圆形、文字等颜色样式

线性渐变是一个对象

    //创建线性渐变的对象，
    var grd=ctx.createLinearGradient(0,0,170,0);
    //添加一个渐变颜色，第一个参数介于0-1的值，表示渐变中开始与结束之间的位置。
    grd.addColorStop(0,"black");  
    grd.addColorStop(1,"white");  //添加一个渐变颜色
    ctx.fillStyle =grd;           //关键点，把渐变设置到 填充的样式

设置圆形渐变/径向渐变- 了解

定义: 创建放射状/圆形渐变对象。可以填充文本、形状等

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

x0: 渐变的开始圆的 x 坐标
y0: 渐变的开始圆的 y 坐标
r0: 开始圆的半径
x1: 渐变的结束圆的 x 坐标
y1: 渐变的结束圆的 y 坐标

r1: 结束圆的半径

      var rlg = ctx.createRadialGradient(300,300,10,300,300,200);
      rlg.addColorStop(0, 'teal');    //添加一个渐变颜色
      rlg.addColorStop(.4, 'navy');
      rlg.addColorStop(1, 'purple');
      ctx.fillStyle = rlg;//设置 填充样式为延续渐变的样式
      ctx.fillRect(100, 100, 500, 500);

绘制背景图-了解

定义: ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素
第一参数：设置平铺背景的图片，第二个背景平铺的方式。
- image ：规定要使用的图片、画布或视频元素。
- repeat ：默认。该模式在水平和垂直方向重复。
- repeat-x ：该模式只在水平方向重复。
- repeat-y ：该模式只在垂直方向重复。
- no-repeat：该模式只显示一次（不重复）。
```
      var ctx=c.getContext("2d");
      var img=document.getElementById("lamp");
      var pat=ctx.createPattern(img,"repeat");
      ctx.rect(0,0,150,100);
      ctx.fillStyle=pat;//  把背景图设置给填充的样式
      ctx.fill();
```

填充/描边颜色 设置阴影 缩放/位移/旋转画布 画布保存base64编码内容 画布渲染画布