Canvas-字体

Canvas – 字体

浏览器支持

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

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

Canvas – 描边字体

我们可以使用strokeText api去画描边字体

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

Canvas – 填充字体

我们可以使用fillText api去画描边字体

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

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

我们可以使用font 去设置字体粗细 ‘ style | variant | weight | size/line-height | family ‘;

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

Canvas – 字体水平对齐方式

ctx.textAlign = ‘left || start’、’right || end’、’center’ 默认值是start

Canvas – 字体垂直对齐方式

ctx.textBaseline = top’、’bottom’、’middle’、’alphabetic’、’hanging’，’ideograpgic’ alphabetic

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 – 字体透明

globalAlpha 其实是一个全局属性，可以设置画布的透明度，当然也可以设置文本的透明度

 // 每点击一次透明度都会减一
            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 – 字体阴影

Canvas通过设置4个Canvas达到阴影的效果，分别是，shadowColor（阴影颜色）, shadowOffsetX（x轴偏移量）, shadowOffsetY（Y轴偏移量）, , shadowBlur（阴影模糊滤镜）

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 – 文本渐变

文本api结合 createLinearGradient api能实现文本的渐变

// 水平颜色渐变
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()
            })()
        },
复制代码