canvas

canvas

1. 获取渲染上下文 getContext

// <canvas id="canvas" width="800" height="800">备用内容</canvas>
const ctx = canvas.getContext("2d")

2. 检查是否支持canvas

if(canvas.getContext){
  // 支持canvas
}else{
  // 不支持canvas
}

3. 绘制矩形

• fillRect(x, y, width, height) 绘制一个填充的矩形
• strokeRect(x, y, width, height) 绘制一个矩形的边框
• clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明

function draw() {
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 600, 300);
  ctx.clearRect(40, 40, 560, 260);
  ctx.strokeStyle = "red";
  ctx.strokeRect(60, 60, 520, 220);
}
draw();


// ctx.strokeRect 相当于 ctx.rect(20, 20, 600, 300)  ctx.stroke()

4. 绘制路径

• beginPath
• moveTo(x, y) 移动笔触,设置起点
• lineTo(x, y)
• closePath
  (这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做)
• stroke
• fill
  (当你调用 fill() 函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用 closePath() 函数。但是调用 stroke() 时不会自动闭合)

function draw() {
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(40, 40);
  ctx.lineTo(20, 80);
  ctx.lineTo(60, 80);
  ctx.closePath();
  ctx.stroke();
}
draw();

5. 圆弧

• arc(x, y, radius, startAngle, endAngle, anticlockwise)
  anticlockwise: true 时，是逆时针方向，否则顺时针方向

function draw() {
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 100, Math.PI, Math.PI * 2, false);
  ctx.closePath();
  ctx.stroke();
  // ctx.fill();
}
draw();

• arcTo(x1, y1, x2, y2, radius)
  根据当前描点(moveTo)与给定的控制点1连接的直线，和控制点1(x1, y1)与控制点2(x2, y2)连接的直线，作为使用指定半径的圆的切线，画出两条切线之间的弧线路径

function draw() {
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(150, 20);
  ctx.arcTo(150, 100, 50, 20, 10);
  ctx.closePath();
  ctx.stroke();
}
draw();

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

• quadraticCurveTo(cp1x, cp1y, x, y)
• bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
  (参数 x、y 在这两个方法中都是结束点坐标。cp1x,cp1y为坐标中的第一个控制点，cp2x,cp2y为坐标中的第二个控制点)

function draw() {
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(70,60)
  ctx.quadraticCurveTo(40, 40, 100, 100);
  ctx.stroke();
}
draw();

7. Path2D
   用来缓存活记录绘画命令(当你想要从几个元素中来创建对象时，这将会很实用)

function draw() {
  const ctx = canvas.getContext("2d");
  const rectangle = new Path2D();
  rectangle.moveTo(50, 50);
  rectangle.lineTo(20, 20);
  rectangle.arc(100, 100, 50, 0, Math.PI * 2, false);
  rectangle.closePath();
  ctx.stroke(rectangle);
}
draw();

• Path2D.addPath(path) 添加一条路径到当前路径

function draw() {
  const ctx = canvas.getContext("2d");
  const circle = new Path2D();
  circle.moveTo(50, 50);
  circle.lineTo(20, 20);
  circle.arc(100, 100, 50, 0, Math.PI * 2, false);
  circle.closePath();

  const rectangle = new Path2D();
  rectangle.rect(10, 10, 50, 50);
  circle.addPath(rectangle);
  ctx.stroke(circle);
}
draw();

8. globalAlpha 设置全局透明度

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  // 画背景
  ctx.fillStyle = "#FD0";
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = "#6C0";
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = "#09F";
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = "#F30";
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = "#FFF";

  // 设置透明度值
  ctx.globalAlpha = 0.2;

  // 画半透明圆
  for (var i = 0; i < 9; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill(); // 透明度叠加,最靠近圆心的部分颜色会深一点
  }
}
draw();

9. line styles 线型

• lineWidth
• lineCap 设置线条末端样式 (butt(默认)、square、round)

let offset = 0;
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.lineCap = "round";
  ctx.lineWidth = 10
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100, 200);
  ctx.stroke();
}
draw();

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

function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.lineWidth = 10;
  ctx.lineJoin = 'round'
  ctx.beginPath();
  ctx.moveTo(100, 100);
  ctx.lineTo(100, 200);
  ctx.lineTo(200, 150);
  ctx.stroke();
}
draw();

• getLineDash() 返回一个包含当前虚线样式，长度为非负偶数的数组
• setLineDash(array) 设置当前虚线样式
• lineDashOffset 设置虚线样式的起始偏移量

let offset = 0;
function draw() {
  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.clearRect(0, 0, 800, 800);
  ctx.setLineDash([10, 5]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(100, 100, 400, 200);
}
function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 10);
}
march();

10. 渐变

• ctx.createLinearGradient(x1, y1, x2, y2)
• ctx.createRadialGradient(x1, y1, r1, x2, y2, r2)
• gradient.addColorStop(position, color) position参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置

function draw() {
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");
    var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
    radgrad.addColorStop(0, "#A7D30C");
    radgrad.addColorStop(0.9, "#019F62");
    radgrad.addColorStop(1, "rgba(1,159,98,0)");

    ctx.fillStyle = radgrad;
    ctx.fillRect(0, 0, 150, 150);
  }
}
draw();

11. 图案样式Patterns

• createPattern(image, type) type: repeat，repeat-x，repeat-y，no-repeat

function draw() {
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.src = "./111.gif";
    img.onload = function () {
      const patterns = ctx.createPattern(img, "no-repeat");
      ctx.fillStyle = patterns;
      ctx.fillRect(0, 0, 600, 600);
    };
  }
}
draw();

12. 阴影shadows

• ctx.shadowOffsetX 阴影偏移量
• ctx.shadowOffsetY
• ctx.shadowBlur 阴影模糊程度
• ctx.shadowColor 阴影颜色
• ctx.font 设置阴影字体（像素 + 字体 50px Times New Roman）
• ctx.fillText 设置文案（内容, x, y）

function draw(){
  if(canvas.getContext){
    const ctx = canvas.getContext('2d');
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowBlur = 2;
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'

    ctx.font = '50px Times New Roman'
    ctx.fillText('Simple Test String', 0, 50)
  }
}
draw()

13. canvas填充规则

• ctx.fill(‘evenodd’)

function draw(){
  if(canvas.getContext){
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.arc(100, 100, 30, 0, Math.PI * 2);
    ctx.arc(100, 100, 50, 0, Math.PI * 2)
    ctx.fill('evenodd')
  }
}
draw()

14. 绘制文本

• ctx.fillText(text, x, y [, maxWidth])
• ctx.strokeText(text, x, y [, maxWidth])
• ctx.font = value
• ctx.textAlign = value
• ctx.textBaseline = value
• ctx.direction = value

15. 测量文本宽度

• ctx.measureText(text).width