填充/描边颜色 设置阴影 缩放/位移/旋转画布 画布保存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图片的阴影，图片透明部分不会被投影。
  

变换

1. 缩放

   • context.scale(scalewidth,scaleheight) 缩放当前绘图，更大或更小
     • scalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
     • scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。

2. 位移画布

   • ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置
     • x： 添加到水平坐标（x）上的值
     • y： 添加到垂直坐标（y）上的值
   • 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
     位移画布一般配合缩放和旋转等。

3. 旋转

   • context.rotate(angle); 方法旋转当前的绘图
     • 注意参数是弧度（PI）
     • 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

4. 绘制环境保存/还原-配合位移画布使用

   • ctx.save() 保存当前环境的状态
     • 可以把当前绘制环境进行保存到缓存中。
   • ctx.restore() 返回之前保存过的路径状态和属性
     • 获取最近缓存的ctx

5. 设置绘制环境的透明度

   • context.globalAlpha=number;
     • number:透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
     • 设置透明度是全局的透明度的样式。注意是全局的。

6. 画布限定区域绘制

   • 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();