Canvas繪圖(四)

本章將介紹Canvas渲染文本方面的操作垦搬，而對(duì)于瀏覽器的支持度參差不齊网严，可以使用modernizr.js這個(gè)庫(kù)提供支持识樱，注意Canvas的文本不能使用css樣式，但是它的屬性與css屬性相似震束。

本章內(nèi)容較少

• 基本文本
• 文本漸變動(dòng)畫(huà)

一怜庸、基本文本

要在Canvas上顯示文本，首先需要通過(guò) font 設(shè)置文本的屬性

• font-style[normal | italic | oblique ]
• font-weight [normal | bold | border | lighter | 100~900 | auto | inherit | auto ]
• font-size
• font-face [serif | sans-serif | cursive | fantasy | monospace ]

例如

drawText() {
    this.context.font = "50px serif";
    this.context.font = "normal bold 50px serif";
    this.context.fillStyle = "#ff0000";
    this.context.fillText("Hellow World", 100, 80);
}

A. 表單與畫(huà)布通信

與DOM綁定事件沒(méi)有什么不同垢村，綁定事件需要重繪整個(gè)Canvas

setup() {
    this.bindEvent();
}

bindEvent() {
    const formElement = document.getElementById("textBox");
    formElement.addEventListener(
        "keyup",
        this._textBoxChange.bind(this),
        false
    );
}

_textBoxChange(e) {
    this.message = e.target.value;
    this.drawScreen();
}

drawScreen() {
    this.context.fillStyle = "#ff0000";
    this.context.fillText(this.message, 100, 80);
}

B. MeasureText

Canvas有一個(gè)用于返回字體在當(dāng)前環(huán)境的文本屬性

a . 居中地輸入文本

drawScreen() {
    this.context.fillStyle = "#ff0000";
    const metrics = this.context.measureText(this.message);
    const textWidth = metrics.width;
    const xPosition = this.theCanvas.width / 2 - textWidth / 2;
    this.context.fillText(this.message, xPosition, 80);
}

b. 計(jì)算文本高度

TextMetrics對(duì)象并不包含高度屬性，我們現(xiàn)階段只能簡(jiǎn)單的將文本渲染在畫(huà)布中央

const yPosition = this.theCanvas.height / 2;
this.context.fillText(this.message, xPosition, yPosition);

C. StrokeText

strokeText()這個(gè)方法與fillText()類似嘉栓，但前者是描邊的效果宏榕，方法如下

還可以使用strokeStyle()方法設(shè)置描邊的顏色

this.context.strokeStyle = '#66ccff'
this.context.strokeText(this.message, xPosition, yPosition);

D. 基線與對(duì)齊

a. 垂直對(duì)齊

可以通過(guò)設(shè)置context.textBaseline來(lái)對(duì)基線進(jìn)行設(shè)置，例如 :

• top : 文本頂端
• hanging : 比top稍低
• middle : 絕對(duì)垂直居中于基線
• alphabetic : 垂直書(shū)寫(xiě)字體的底部侵佃，例如阿拉伯文麻昼、拉丁文與西伯來(lái)文
• bottom : 文本底部

b. 水平對(duì)齊

context.textAlign設(shè)置關(guān)于x軸的文本位置，它有以下屬性

• center : 文本絕對(duì)水平居中
• start : 從y軸前端開(kāi)始顯示
• end : 從y軸末尾開(kāi)始顯示
• left : 文本最左端從y軸位置開(kāi)始
• right : 文本最右端從y軸位置開(kāi)始

E. 全局陰影趣钱、漸變涌献、圖案

陰影與透明度對(duì)文字也是有效的

this.context.shadowOffsetX = this.shadowOffsetX;
this.context.shadowOffsetY = this.shadowOffsetY;
this.context.shadowColor = this.shadowColor;
this.context.shadowBlur = this.shadowBlur;

文本漸變應(yīng)用前幾章的學(xué)習(xí)的漸變效果胚宦，需要注意的是首有，在創(chuàng)建線性漸變時(shí)燕垃，起點(diǎn)需要位于文本開(kāi)始處并結(jié)束于文本寬度。例如 :

const metrics = this.context.measureText(this.message)
const textWidth = metrics.width 
const gradient = this.context.createLinerGradient(100,100,textWidth,100)
gradient.addColorStop(0,'#000')
gradient.addColorStop(.5,'#fff')
this.context.fillStyle = gradient

若要使用圖案填充井联，則需要調(diào)用Canvas環(huán)境的createPattern卜壕，再

const pattern = this.context.createPattern(patternImg,'repeat')
this.context.fillStyle = pattern

實(shí)例 : 文本處理器

1601784040135.png

代碼貼在另外一篇文章

二、文字動(dòng)畫(huà)

Canvas的動(dòng)畫(huà)比HTML強(qiáng)得多烙常，例如在使用漸變效果時(shí)轴捎，不僅能編輯文本，還能動(dòng)態(tài)創(chuàng)建文本蚕脏，例如做一個(gè)漸變的文字動(dòng)畫(huà)

import "@s/assets/style/normalize.scss";
import helloworld from "@s/assets/images/helloworld.jpg";

class CanvasApp {
  constructor() {
    this.theCanvas = document.getElementById("canvasOne");
    this.context = this.theCanvas.getContext("2d");
    this.fadeIn = true;
    this.text = "Hello World";
    this.alpha = 0;
    this.colorStops = [
      {
        color: "#ff0000",
        stopPercent: 0,
      },
      {
        color: "#ffff00",
        stopPercent: 0.125,
      },
      {
        color: "#00ff00",
        stopPercent: 0.375,
      },
      {
        color: "#0000ff",
        stopPercent: 0.625,
      },
      {
        color: "#ff00ff",
        stopPercent: 0.875,
      },
      {
        color: "#ff0000",
        stopPercent: 1,
      },
    ];
  }
  setup() {
    const helloWorldImage = new Image();
    helloWorldImage.onload = () => {
      this.context.drawImage(helloWorldImage, 0, 0, 720, 300);
    };
    helloWorldImage.src = helloworld;
    this.gameLoop(this.drawScreen);
  }
  gameLoop(callback) {
    window.requestAnimationFrame(this.gameLoop.bind(this, callback));
    callback.call(this);
  }
  drawScreen() {
    const gradient = this.context.createLinearGradient(
      this.theCanvas.width / 2,
      0,
      this.theCanvas.width / 2,
      this.theCanvas.height
    );

    this.colorStops.forEach((stop) => {
      const tempColor = stop.color;
      let tempStopPercent = stop.stopPercent;
      gradient.addColorStop(tempStopPercent, tempColor);
      tempStopPercent += 0.015;
      if (tempStopPercent > 1) {
        tempStopPercent = 0;
      }
      stop.stopPercent = tempStopPercent;
    });
    this.context.globalAlpha = 1;
    this.context.fillStyle = gradient;
    this.context.fillRect(0, 0, 720, 300);
    this.context.font = "72px Sans-Serif";
    this.context.textBaseline = "top";
    this.context.fillStyle = "#ffffff";
    this.context.fillText(this.text, 150, 120);
  }
}

new CanvasApp().setup();

1601809888796.png