canvas

canvas

我在之前已经看过一段时间canvas的api了,现在先将api重新过亿遍。
然后根据文档中不理解的东西，具体的在去学习。

绘制

canvas 基本用法

  
  var cvs = document.getElementById('#canvas')

  // 检查浏览器是否支持
  if(cvs.getContext){
    var ctx = cvs.getContext('2d')
  }else{
    return
  }

绘制形状

  // 绘制填充矩形
  ctx.fillRect(x,y,w,h);

  // 绘制镂空矩形
  ctx.strokeRect(x,y,w,h);

  // 清除指定区域
  ctx.clearRect(x,y,w,h);

绘制路径

  // 开始一条路径的绘制
  ctx.beginPath();

  // 结束一条路径的绘制
  ctx.closePath();

  // 绘制镂空路径
  ctx.stroke();

  // 绘制填充路径 
  // 后面才发现这个api 还有一个模式的选择
  // model: nonzero / evenodd
  ctx.fill(model);

  // 从当前坐标点开始绘制路径
  ctx.moveTo(x,y)

  // 从上一个坐标点绘制到目标坐标点
  ctx.lineTo(x,y)

绘制文本

绘制文本的api

  // 最后一个参数通常省略
  ctx.fillText(text,x,y,maxwidth)
  ctx.strokeText(text,x,y,maxwidth)
  
  // 类似于css
  ctx.textAlign = ''
  // ltr, rtl, inherit
  ctx.direction = ''
  // top, hanging, middle, alphabetic, ideographic, bottom
  ctx.textBaseline =''

  measureText

  // 测量文本的宽度
  
  var text = ctx.measureText("foo"); // TextMetrics object
  text.width; // 16;

绘制圆弧

  // 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
  ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

  // 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
  ctx.arcTo(x1, y1, x2, y2, radius)

  // 注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:

  弧度=(Math.PI/180)*角度。

  // 如何获取圆上的坐标点？
  sinθ = y/r
  cosθ = x/r
  x = cosθ*r = Math.cos(180*i/Math.PI)*r
  y = sinθ*r = Math.sin(180*i/Math.PI)*r

绘制线型

  // 绘制线的宽度
  ctx.lineWidth = 3

  // 绘制线的末端样式 (butt，round 和 square。默认是 butt。)
  ctx.lineCap = 'butt'

  // 设定线条与线条间接合处的样式 (round, bevel 和 miter。默认是 miter。)
  lineJoin = 'miter' 
  
  // 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
  miterLimit = value

  // 返回一个包含当前虚线样式，长度为非负偶数的数组。
  ctx.getLineDash()

  // 设置当前虚线样式。setLineDash 方法接受一个数组
  ctx.setLineDash(segments)

  // 设置虚线样式的起始偏移量。
  ctx.lineDashOffset = value

  用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset 属性设置起始偏移量.

  var ctx = document.getElementById('canvas').getContext('2d');
  var offset = 0;

  function draw() {
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.setLineDash([4, 2]);
    ctx.lineDashOffset = -offset;
    ctx.strokeRect(10,10, 100, 100);
  }

  function march() {
    offset++;
    if (offset > 16) {
      offset = 0;
    }
    draw();
    setTimeout(march, 20);
  }

  march();

二次贝塞尔曲线及三次贝塞尔曲线

感觉贝塞尔曲线涉及到的东西尤其的多，点线面的许许多多的知识。之后再去学习，咋们继续往下翻文档。

// 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点
ctx.quadraticCurveTo(cp1x, cp1y, x, y) 

// 绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

使用样式和颜色

  // 绘制填充图形的颜色
  ctx.fillStyle = 'red'
  // 绘制镂图形的颜色
  ctx.strockStyle = 'red'
  // 设置全局透明度
  globalAlpha = '0.5'
  

绘制渐变

这个api类似于 css3的线性渐变、径向渐变。

通过 createLinearGradient / createRadialGradient 创建 线性渐变、径向渐变

然后通过addColorStop 添加渐变的颜色

最后通过 给fillStyle 和 strokeStyle 赋值。

看具体的代码

  ctx.createLinearGradient(x,y,x1,y1)

  var gradient = ctx.createLinearGradient(0,0,2,2) 
  ctx.gradient.addColorStop(0,'red')
  ctx.gradient.addColorStop(1,'#fff')
  //赋值给style 
  ctx.fillStyle = geadient;

图案样式

就是用图片绘制你想要的图形。

function draw() {

  // createPattern()

  var ctx = document.getElementById('canvas').getContext('2d');

  // 创建新 image 对象，用作图案
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // 创建图案
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);

  }
}

阴影 Shadows

就目前的了解来看canvas的shadows 值只针对于文字的。

  ctx.shadowsOffsetX  // X轴上偏移的值
  ctx.shadowsOffsetY  // Y轴上偏移的值
  ctx.shadowBulr // 模糊的值
  ctx.shadowColr // 颜色

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);

保存状态(save) 弹出状态(restore)

canvas.save();与canvas.restore();

一般结合使用，.save()函数在前，.restore()函数在后，

用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响。

对canvas中特定元素的旋转平移等操作实际上是对整个画布进行了操作，所以如果不对canvas进行save以及restore，那么每一次绘图都会在上一次的基础上进行操作，最后导致错位。

比如说你相对于起始点每次30度递增旋转，30，60，90.如果不使用save 以及 restore 就会变成30, 90, 150，每一次在前一次基础上进行了旋转。

save 再函数之前 restore在函数之后.

怎么解释看

官网解释

形变

  // 旋转
  ctx.rotate(radians)
  注意：角度以弧度表示，而不是度数。要转换，我们使用：radians = (Math.PI/180)*degrees。


  // 移动
  ctx.translate(x,y)
  // 在网格上移动画布及其原点。x指示要移动的水平距离，并y指示垂直移动网格的距离。 

  // 缩放 x y 表示在 水平垂直 上缩小多少  1 为正常值
  ctx.scale(x,y)

  // 变换
  ctx.transform() 和 ctx.setTransform() 要配合使用

  ctx.transform(a,b,c,d,e,f)
  // 将当前变换重置为单位矩阵，然后transform()使用相同的参数调用该方法。这基本上会撤消当前的转换，然后设置指定的转换，一步完成。

  a (m11)
  水平缩放。
  b (m12)
  水平倾斜。
  c (m21)
  垂直倾斜。
  d (m22)
  垂直缩放。
  e (dx)
  水平移动。
  f (dy)
  垂直移动。
  
  
  ctx.setTransform() 
  
  将当前变换重置为单位矩阵。这与调用相同：ctx.setTransform(1, 0, 0, 1, 0, 0);
  

合成 裁剪

  
  globalCompositeOperation = type

  ctx.clip();