设置填充和描边颜色

  1. fillStyle : 设置用于填充绘画的颜色
  2. strokeStyle : 设置用于描边的颜色
  3. 以上两个值都可以接受颜色名,16 进制数据，rgb 值，甚至 rgba. 一般先进行设置样式然后进行绘制。

设置阴影

  1. 此部分内容由于使用性能差，故了解即可，阴影的设置常用图片实现
  2. shadowColor ： 设置或返回用于阴影的颜色。
  3. shadowBlur ： 设置或返回用于阴影的模糊级别,大于 1 的正整数，数值越高，模糊程度越大
  4. shadowOffsetX： 设置或返回阴影距形状的水平距离
  5. shadowOffsetY： 设置或返回阴影距形状的垂直距离

线性渐变样式

  1. 一般不用，都是用图片代替，canvas 绘制图片效率更高
  2. 线性渐变可以用于 矩形、圆形、文字等颜色样式，线性渐变是一个对象
  3. 语法：ctx.createLinearGradient(x0,y0,x1,y1); //参数：x0,y0 起始坐标，x1,y1 结束坐标
    1
    2
    3
    4
    5
    //创建线性渐变的对象，
    var grd = ctx.createLinearGradient(0, 0, 170, 0);
    grd.addColorStop(0, 'black'); //添加一个渐变颜色，第一个参数介于              0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
    grd.addColorStop(1, 'white'); //添加一个渐变颜色
    ctx.fillStyle = grd; //关键点，把渐变设置到 填充的样式

圆形渐变(径向渐变)

  1. 创建放射状/圆形渐变对象。可以填充文本、形状等
  2. 语法: context.createRadialGradient(x0,y0,r0,x1,y1,r1);
    • x0: 渐变的开始圆的 x 坐标
    • y0: 渐变的开始圆的 y 坐标
    • r0: 开始圆的半径
    • x1: 渐变的结束圆的 x 坐标
    • y1: 渐变的结束圆的 y 坐标
    • r1: 结束圆的半径

绘制背景图

  1. 语法:ctx.createPattern(img,repeat) 方法在指定的方向内重复指定的元素
  2. 不常用，了解即可
  3. 第一参数：设置平铺背景的图片，第二个背景平铺的方式。
    • image ： 规定要使用的图片、画布或视频元素
    • repeat ： 默认。该模式在水平和垂直方向重复
    • repeat-x ： 该模式只在水平方向重复。
    • repeat-y ： 该模式只在垂直方向重复。
    • no-repeat： 该模式只显示一次（不重复）
      1
      2
      3
      4
      5
      6
      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();

      缩放(重点内容)

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

位移画布(重点)

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

画布旋转

  1. context.rotate(angle); 方法旋转当前的绘图
  2. 注意参数是弧度（PI）

绘制环境的保存和还原

  1. ctx.save() 保存当前环境的状态，可以把当前绘制环境进行保存到缓存中。
  2. ctx.restore() 返回之前保存过的路径状态和属性，获取最近缓存的 ctx
  3. 一般配合位移画布使用

绘制环境的透明度

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

本文摘录自老马前端canvas学习笔记，如有侵权，请联系删除