使用 Canvas 繪製有陰影文字 | 點燈坊

HTML 5 Canvas 除了能繪製圖片與圖形外，也可以繪製文字並加上陰影。

Version

Vue 2.6.11
HTML 5

Canvas

除了繪製文字外，尚加了黑色陰影方便辨識。

<template>
  <canvas ref="canvas"/>
</template>

<script>
let mounted = function() {
  let context = this.$refs.canvas.getContext('2d')
  context.canvas.width = innerWidth
  context.canvas.height = innerHeight
  
  context.font = "15px Verdana"
  context.fillStyle = 'red'
  
  context.shadowOffsetX = 2
  context.shadowOffsetY = 2
  context.shadowColor = 'rgba(0, 0, 0, 1)'
  context.shadowBlur = 1
  
  context.fillText('37.5', 40, 20)
}

export default {
  name: 'App',
  mounted
}
</script>

第 2 行

<canvas ref="canvas"/>

使用 HTML 5 的 <canvas> tag，為了能讓 Vue 控制，特別加上 ref。

第 7 行

let context = this.$refs.canvas.getContext('2d')
context.canvas.width = innerWidth
context.canvas.height = innerHeight

• 使用 $refs 取得 canvas ref，並指使用其 2d context
• 設定 canvas 的長寬

11 行

context.font = "15px Verdana"
context.fillStyle = 'red'

• 使用 font 設定字型大小
• 使用 fillStyle 設定字型顏色

14 行

context.shadowOffsetX = 2
context.shadowOffsetY = 2
context.shadowColor = 'rgba(0, 0, 0, 1)'
context.shadowBlur = 1

• 使用 shadowOffsetX 設定 shadow 的 offset X 座標
• 使用 shadowOffsetY 設定 shadow 的 offset Y 座標
• 使用 shadowColor 設定 shadow 顏色，注意是 String
• 使用 shadowBlur 設定 blur 程度，數值越大 blur 程度越高

19 行

context.fillText('37.5', 40, 20)

• 使用 fillText() 設定寫入文字與起始座標

Conclusion

• 若想完全以 code 繪製 HTML 5 Canvas，其實可不必使用 package，直接使用 Canvas API 即可