摘要：根據(jù)瀏覽器設(shè)備的繪制限制來(lái)更新動(dòng)畫，回調(diào)的次數(shù)常是每秒次。鼠標(biāo)移入則停止自動(dòng)改變樹枝狀態(tài)，轉(zhuǎn)為由鼠標(biāo)的橫縱坐標(biāo)控制?；镜纳羁截惙椒〝?shù)組，等方法，新增運(yùn)算符對(duì)象思路是把對(duì)象拆開分別賦值，同樣可以使用新增運(yùn)算符，循環(huán)等。

???????動(dòng)畫的形成：先畫出一幅圖，改變其中的一些參數(shù)，重新繪制圖片...不斷的重復(fù)形成動(dòng)畫。

fillStyle:設(shè)置或返回填充繪畫的顏色，漸變或模式

strokeStyle:設(shè)置或返回用于筆觸的顏色，漸變或模式

fill(): 填充當(dāng)前路徑（如果路徑未關(guān)閉則會(huì)從路徑結(jié)束點(diǎn)到開始點(diǎn)之間添加一條線）

stroke():繪制已定義的路徑。

moveTo():把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條

beginPath():起始一條路徑或重置當(dāng)前路徑

closePath():創(chuàng)建從當(dāng)前點(diǎn)回到起始點(diǎn)的路徑

lineTo():添加一個(gè)新點(diǎn)，創(chuàng)建一條連接至該點(diǎn)的線條

clearRect():清除指定矩形內(nèi)的像素

arc():創(chuàng)建弧或曲線

rotate():創(chuàng)建兩點(diǎn)之間的弧或曲線

translate():重新映射畫布上的(0,0)位置

drawImage():繪制圖像、畫布或視頻

save():保存當(dāng)前環(huán)境狀態(tài)

restore():返回之前保存過(guò)的路徑和狀態(tài)

getContext():返回一個(gè)用于在畫布上繪圖的環(huán)境

requestAnimationFrame():回調(diào)例程調(diào)用 requestAnimationFrame()。根據(jù)瀏覽器設(shè)備的繪制限制,來(lái)更新動(dòng)畫，回調(diào)的次數(shù)常是每秒60次。

整體邏輯

創(chuàng)建一個(gè)類，實(shí)例化根元素，遞歸創(chuàng)建分支直到層數(shù)，每層分支長(zhǎng)度（length）遞減，直至層數(shù)>=5;

調(diào)用drawBranch生成一張圖片

改變樹枝展開角度以及位置執(zhí)行requestA nimationFrame();重復(fù)執(zhí)行;形成動(dòng)畫

將12個(gè)不同旋轉(zhuǎn)角度的動(dòng)畫canvas添加到canvas2.圍成一圈。

鼠標(biāo)移入則停止自動(dòng)改變樹枝狀態(tài)，轉(zhuǎn)為由鼠標(biāo)的橫縱坐標(biāo)控制。

關(guān)鍵代碼理解

class Branch {
    /**
     * 分枝類，以下為參數(shù)，都帶有默認(rèn)值
     * 位置 position
     * 長(zhǎng)度 length
     * 分支位置 divergeAt
     * 展開角度 angle
     * 層數(shù) depth
     * 分支展開角度變化量 spread
     */
  constructor(position = {x : 0, y: 0}, length = 100, divergeAt = 0.5, angle = 0, depth = 0, spread = 45 * TO_RADIAN) {
    this.position = position;
    this.length = length;
    this.divergeAt = divergeAt;
    this.angle = angle;
    this.depth = depth;

    this.color = "#000";
    this.spread = spread;
    this.branches = [];

    this.grow();
  }

  grow() {
      /**
       * 創(chuàng)建分支,如果canBranch = true(未達(dá)到最大分支數(shù)量)
       * 新分支長(zhǎng)度為父級(jí)的0.75，深度加1
       * 展開角度變化spread
       * 由于構(gòu)造方法中調(diào)用了grow方法，所以會(huì)不斷重復(fù)創(chuàng)建上述過(guò)程
       */
    if (!this.canBranch) {
      return;
    }

    this.branches = [];

    const nextLength = this.length * 0.75;
    const nextDepth = this.depth + 1;

    this.branches.push(
      new Branch(
        this.growPosition,
        nextLength,
        this.divergeAt,
        this.angle + this.spread,
        nextDepth,
        this.spread
      ),
      new Branch(
        this.growPosition,
        nextLength,
        this.divergeAt,
        this.angle - this.spread,
        nextDepth,
        this.spread
      )
    );
  }

  update(spread, divergeAt) {
    this.spread = spread;
    this.divergeAt = divergeAt;

    this.grow();
  }

  get growPosition() {
    const dl = this.length * this.divergeAt;

    return {
      x: this.position.x + (Math.cos(this.angle) * dl),
      y: this.position.y + (Math.sin(this.angle) * dl),
    };
  }

  get canBranch() {
    return this.depth < maxDepth;
  }
}

    /**
     * 保存當(dāng)前狀態(tài)
     * 根據(jù)branch類中的數(shù)據(jù)畫圖（顏色，直線和圓點(diǎn)）
     * 遞歸對(duì)分支進(jìn)行繪圖
     */
const drawBranch = (branch, phase) => {
  const h = ~~(200 + (160 * phase));
  const l = 50 + ~~(((branch.depth / (maxDepth + 1))) * 50);

  const endX = branch.length;
  const endY = 0;
  const r = 2;

  ctx.save();

  ctx.strokeStyle = `hsl(${h}, 100%, ${l}%)`;
  ctx.translate(branch.position.x, branch.position.y);
  ctx.rotate(branch.angle);

  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(endX, endY);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = `hsl(${h}, 100%, 50%)`;
  ctx.arc(endX, endY, r, 0, PI * 2, false);
  ctx.fill();
  ctx.closePath();

  ctx.restore();

  branch.branches.forEach((b) => {
    drawBranch(b, phase);
  });
};

const loop = () => {
    /**
     * 改變類中參數(shù)的值
     * 將第一個(gè)canvas添加到在第二個(gè)canvas中循環(huán)12次每次旋轉(zhuǎn)2PI/12的角度，形成一個(gè)環(huán)狀
     * 調(diào)用requestAnimationFrame() 重新根據(jù)類中的數(shù)據(jù)畫圖
     */
  let phase = rootBranch.spread / maxSpread;

  clear(phase);

  if (autoAnimate) {
    phase = map(Math.sin(autoTick), -1, 1, 0, 1);

    spread = phase * maxSpread;
    divergeAt = map(Math.sin(autoTick), -1, 1, 0, 0.5);

    autoTick += autoSpeed;
  }

  rootBranch.update(spread, divergeAt);

  drawBranch(rootBranch, phase);

  const numSegments = 12;
  const angleInc = PI * 2 / numSegments;
  let angle = tick;

  for (let i = 0; i < numSegments; i++) {
    ctx2.save();
    ctx2.translate(midX, midY);
    ctx2.rotate(angle);
    ctx2.drawImage(canvas, -w / 2, -h / 2);
    ctx2.restore();
    angle += angleInc;
  }

  tick += 0.002;

  requestAnimationFrame(loop);
};

npm安裝： npm i element-ui -s

cdn

完整引入

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

按需引入

需要安裝 babel-plugin-component：

npm install babel-plugin-component -D

在.babelrc中添加：

"plugins": [
    "transform-vue-jsx", "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

import {Loading, Tabs, TabPane,} from "element-ui";

Vue.use(Loading);
Vue.use(Tabs);
Vue.use(TabPane);

/* 改變主題色變量 */
$--color-primary: teal;

/* 改變 icon 字體路徑變量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

@import "~element-ui/packages/theme-chalk/src/index";

npm i element-theme -g

之后步驟為：

安裝主題

初始化變量文件

修改變量

編譯成css

引入

???????在星盤改版的時(shí)候遇到了相關(guān)的問(wèn)題，數(shù)據(jù)從父組件傳遞到子組件，當(dāng)時(shí)沒(méi)考慮到這方面的問(wèn)題，只是對(duì)數(shù)據(jù)進(jìn)行了一層的拷貝,因?yàn)楫?dāng)時(shí)傳進(jìn)來(lái)的數(shù)據(jù)是有很多層的，所以還是會(huì)導(dǎo)致源數(shù)據(jù)改變。所以總結(jié)一下，寫成一個(gè)方法，這個(gè)應(yīng)該會(huì)比較常用。

???????Object屬于引用類型，對(duì)它進(jìn)行簡(jiǎn)單賦值（obj1 = obj2）的話只是創(chuàng)建一個(gè)指針指向原數(shù)據(jù)的地址，改變它的值也會(huì)改變?cè)磾?shù)據(jù)的值，會(huì)造成很多問(wèn)題。

數(shù)組

concat，slice 等方法，es6 新增運(yùn)算符‘...’

對(duì)象

思路是把對(duì)象拆開分別賦值，同樣可以使用es6 新增運(yùn)算符‘...’，for循環(huán)等。

運(yùn)用遞歸逐層拷貝。

function depCopy(obj){
    let value;
    if(typeof obj === "object"){
      if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){
        // debugger;
        value = [];
        for(let i = 0, length = obj.length; i