Canvas笔记（持续更新~）

    Canvas，又称“画布”，是HTML5的核心技术之一。HTML5中新增了一个Canvas元素，我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。

使用Canvas元素来绘制图案，分3步：

• 获取Canvas对象
• 获取上下文环境对象context
• 绘制图形

Step1.获取Canvas对象

// 为求方便，这里把它封装成函数
// 通过id获取Canvas对象
 $$(id) {
      return document.getElementById(id);
    }

Step2.获取上下文环境对象context

let ele = this.$$('eleId')
let cxt = ele.getContext('2d')

Step3.绘制图形

• 绘制直线

     语法：
      cxt.moveTo(x,y);
      cxt.lineTo(x,y);
      cxt.stroke();

// 获取Canvas对象
	let ele = that.$$("line");
// 获取上下文环境对象context
	let line = ele.getContext("2d");
// 绘制(1条直线)
	line.moveTo(30, 10);
	line.lineTo(150, 10);
	line.stroke();

// 绘制（1组平行线）
	line.moveTo(30, 30);
	line.lineTo(150, 30);
	line.moveTo(30, 80);
	line.lineTo(150, 80);
	line.stroke();

// 绘制（两条直线交于某顶点）
	line.moveTo(30, 180);
	line.lineTo(150, 180);
	line.lineTo(150, 230);
	line.stroke();

• 绘制矩形

    语法(描边矩形)：
      cxt.strokeStyle = ‘属性值’;
      cxt.strokeRect(x, y, width, height);

    语法(填充矩形)：
      cxt.fillStyle = ‘属性值’;
      cxt.fillRect(x, y, width, height);

    语法(矩形)：
      cxt.strokeStyle = ‘属性值’;
      cxt.rect(x, y, width, height);
      cxt.stroke();

      cxt.fillStyle = ‘属性值’;
      cxt.rect(x, y, width, height);
      cxt.fill();

    语法(清空矩形)：
      cxt.clearRect(x, y, width, height);

      let ele = that.$$("rect");
      console.log("drawRect绘制在那张画布上？", ele);
      let rect = ele.getContext("2d");

      // 渐变颜色
      let gradient = rect.createLinearGradient(0, 0, 80, 0);
      gradient.addColorStop("0", "magenta");
      gradient.addColorStop("0.5", "blue");
      gradient.addColorStop("1.0", "red");

      // 渐变颜色
      let gradients = rect.createLinearGradient(150, 0, 300, 0);
      gradients.addColorStop("0", "magenta");
      gradients.addColorStop("0.5", "blue");
      gradients.addColorStop("1.0", "red");

      // 绘制描边矩形
      rect.strokeStyle = "red"; //  颜色
      rect.strokeStyle = "#333333"; //16进制颜色值
      rect.strokeStyle = gradient; // 渐变颜色值
      rect.strokeRect(30, 30, 80, 80);

      // 绘制填充矩形
      rect.fillStyle = "red"; //  颜色
      rect.fillStyle = "#333333"; //16进制颜色值
      rect.fillStyle = gradients; // 渐变颜色值
      rect.fillRect(150, 30, 180, 80);

      // 绘制描边填充矩形
      rect.strokeStyle = "red";
      rect.strokeRect(50, 150, 80, 80);
      rect.fillStyle = "#FFE8E8";
      rect.fillRect(50, 150, 80, 80);

      // 绘制矩形（rect + stroke）
      rect.strokeStyle = "blue";
      rect.rect(150, 150, 80, 80);
      rect.stroke();

      // 绘制矩形（rect + fill）
      rect.fillStyle = "green";
      rect.rect(250, 150, 80, 80);
      rect.fill();

      // 清空区域矩形
      rect.clearRect(270, 170, 40, 40)

• 绘制曲线图形

  语法(圆形)：
    cxt.beginPath();
    cxt.arc(x,y，半径，开始角度，结束角度， anticlockwise);
    cxt.closePath();

  画圆步骤：
            开始路径
            arc()画圆
            结束路径
            描边/填充操作

	let ele = this.$$("curve");
	let curve = ele.getContext("2d");

      // 半圆
      curve.beginPath();
      curve.arc(80, 80, 50, 0, (180 * Math.PI) / 180, true);
      curve.closePath();
      // 描边
      curve.strokeStyle = "HotPink";
      curve.stroke();
      // 整圆
      curve.beginPath();
      curve.arc(320, 80, 50, 0, (360 * Math.PI) / 180, true);
      curve.closePath();
      // 描边
      curve.strokeStyle = "HotPink";
      curve.stroke();

      // 整圆
      curve.beginPath();
      curve.arc(320, 200, 50, 0, (360 * Math.PI) / 180, true);
      curve.closePath();
      // 填充
      curve.fillStyle = "HotPink";
      curve.fill();