Canvas – font

Canvas – font

Browser support

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the fillStyle attribute.

Note: Internet Explorer 8 and earlier do not support elements.

Canvas – Stroke font

We can use the strokeText API to draw the stroke font

      // Define the stroke color
      this.ctx.strokeStyle = 'red'
      this.ctx.font = 'bold 32px serif'
      this.ctx.strokeText('hello word'.120.130)
Copy the code

Canvas – fill font

We can use the fillText API to draw the stroke font

      // Define the fill color
      this.ctx.strokeStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word'.120.130)
Copy the code

Canvas – Font style, type, size, and thickness

We can use the font to set the font weight ‘style | variant | weight | size/line – height | family’;

      // Define the fill color
      this.ctx.strokeStyle = 'red'
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word'.120.130)
Copy the code

Canvas – Horizontal font alignment

CTX. TextAlign = ‘left | | start’, ‘right | | end’ and ‘center’ default value is start

Canvas – Vertical font alignment

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)
Copy the code

Canvas – Transparent fonts

GlobalAlpha is a global property that allows you to set the opacity of the canvas as well as the text

 // The transparency is reduced by one with each click
            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)
Copy the code

Canvas – Font shadow

ShadowColor (shadowColor), shadowOffsetX (X-axis offset), shadowOffsetY (Y-axis offset), shadowBlur (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)
Copy the code

Canvas – Text gradient

The text API is combined with the createLinearGradient API for text gradient

// Horizontal color gradient
let gr = this.ctx.createLinearGradient(60.0.430.0) // Initialize the gradient
            gr.addColorStop(0.'rgb(255, 0, 0)') // Initial position
            gr.addColorStop(0.5.'rgb(0, 255, 0)') // Intermediate position
            gr.addColorStop(1.'rgb(255, 0, 0)') // End position
            this.ctx.fillStyle = gr
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word'.60.130)
// Vertical color gradient
            gr = this.ctx.createLinearGradient(0.100.0.130) // Initialize the gradient
            gr.addColorStop(0.'rgb(255, 0, 0)') // Initial position
            gr.addColorStop(0.5.'rgb(0, 255, 0)') // Intermediate position
            gr.addColorStop(1.'rgb(255, 0, 0)') // End position
            this.ctx.fillStyle = gr
            this.ctx.font = 'bold 64px serif'
            this.ctx.fillText('hello word'.420.130)

Copy the code

Canvas – Dynamic text animation

The main way to set the gradient to achieve this effect is to change the starting position of the gradient, and the color

/ / animation
darwScreen() {
            // Set the canvas background
            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
            // Set the gradient
            let gr = this.ctx.createLinearGradient(400.0.400.600) // Initialize the gradient
            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)
        }
        // Loop animation
filltextdh() {
            let self = this; (function frame() {
                window.requestAnimationFrame(frame)
                self.darwScreen()
            })()
        },
Copy the code