Canvas-字体

Canvas - 字体

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fillStyle 属性。

注释：Internet Explorer 8 以及更早的版本不支持 元素。

Canvas - 描边字体

      // 定义描边颜色
      this.ctx.strokeStyle = 'red'
      this.ctx.font = 'bold 32px serif'
      this.ctx.strokeText('hello word', 120, 130)

Canvas - 填充字体

      // 定义填充颜色
      this.ctx.strokeStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 120, 130)

Canvas - 字体样式，类型，大小，粗细

      // 定义填充颜色
      this.ctx.strokeStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 120, 130)

Canvas - 字体水平对齐方式

Canvas - 字体垂直对齐方式

this.ctx.fillStyle = 'red'
            this.ctx.font = 'bold 32px serif'
            this.ctx.textAlign = 'left'
            this.ctx.fillText('hello', 120, 130)
            this.ctx.fillStyle = 'blue'
            this.ctx.textAlign = 'right'
            this.ctx.fillText('hello', 120, 130)
            this.ctx.fillStyle = 'green'
            this.ctx.textAlign = 'center'
            this.ctx.fillText('hello', 120, 130)
            this.ctx.font = 'bold 32px serif'
            this.ctx.fillStyle = 'red'
            this.ctx.textBaseline = 'alphabetic'
            this.ctx.fillText('alphabetic', 320, 130)
            this.ctx.fillStyle = 'blue'
            this.ctx.textBaseline = 'top'
            this.ctx.fillText('top', 350, 130)
            this.ctx.fillStyle = 'green'
            this.ctx.textBaseline = 'hanging'
            this.ctx.fillText('hanging', 380, 130)
            this.ctx.fillStyle = 'red'
            this.ctx.textBaseline = 'middle'
            this.ctx.fillText('middle', 410, 130)
            this.ctx.fillStyle = 'blue'
            this.ctx.textBaseline = 'ideographic'
            this.ctx.fillText('ideographic', 440, 130)
            this.ctx.fillStyle = 'green'
            this.ctx.textBaseline = 'bottom'
            this.ctx.fillText('bottomq', 570, 130)

Canvas - 字体透明

 // 每点击一次透明度都会减一
            this.ctx.clearRect(0, 0, 800, 800)
            this.globalAlphaValue -= 0.1
            this.ctx.globalAlpha = this.globalAlphaValue
            this.ctx.fillStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 120, 130)

Canvas - 字体阴影

this.ctx.shadowColor = 'green'
            this.ctx.shadowOffsetX = '4'
            this.ctx.shadowOffsetY = '4'
            this.ctx.shadowBlur = '4'
            this.ctx.fillStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 120, 130)

Canvas - 文本渐变

// 水平颜色渐变
let gr = this.ctx.createLinearGradient(60, 0, 430, 0) //初始化渐变
            gr.addColorStop(0, 'rgb(255, 0, 0)') // 初始位置
            gr.addColorStop(0.5, 'rgb(0, 255, 0)') // 中间位置
            gr.addColorStop(1, 'rgb(255, 0, 0)') // 结束位置
            this.ctx.fillStyle = gr
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 60, 130)
// 垂直颜色渐变
            gr = this.ctx.createLinearGradient(0, 100, 0, 130) //初始化渐变
            gr.addColorStop(0, 'rgb(255, 0, 0)') // 初始位置
            gr.addColorStop(0.5, 'rgb(0, 255, 0)') // 中间位置
            gr.addColorStop(1, 'rgb(255, 0, 0)') // 结束位置
            this.ctx.fillStyle = gr
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word', 420, 130)

Canvas - 动态文字动画

// 画动画
darwScreen() {
            // 设置画布背景
            this.ctx.fillStyle = '#333'
            this.ctx.fillRect(0, 0, 800, 600)
            this.ctx.font = '90px impact'
            this.ctx.textAlign = 'center'
            this.ctx.textBaseline = 'middle'
            let metrics = this.ctx.measureText('hello word')
            let textWidth = metrics.width
            let xposition = 400
            let yposition = 300
            // 设置渐变
            let gr = this.ctx.createLinearGradient(400, 0, 400, 600) //初始化渐变
            for (let i = 0; i < this.colorStops.length; i++) {
                let tempColorStop = this.colorStops[i]
                let tempColor = tempColorStop.color
                let tempStopPercent = tempColorStop.stopPercent
                gr.addColorStop(tempStopPercent, tempColor)
                tempStopPercent += 0.015
                if (tempStopPercent > 1) {
                    tempStopPercent = 0
                }
                tempColorStop.stopPercent = tempStopPercent
                this.colorStops[i] = tempColorStop
            }
            this.ctx.fillStyle = gr
            this.ctx.fillText('hello word', xposition, yposition)
        }
        // 循环动画
filltextdh() {
            let self = this
            ;(function frame() {
                window.requestAnimationFrame(frame)
                self.darwScreen()
            })()
        },