<template>
<canvas class="" id="canvas" width="1000" height="600">当前浏览器不支持canvas元素，请升级或更换浏览器！</canvas>
</template>
<script setup lang="ts">
onMounted(() => {
const el = document.querySelector('#canvas') as HTMLCanvasElement
const ctx = el.getContext('2d') as CanvasRenderingContext2D
ctx.beginPath()
ctx.fillStyle = '#00bcd4'
ctx.fillRect(0, 0, 1000, 600)
ctx.textAlign = 'center'
ctx.fillStyle = 'red'
ctx.font = '30px Arial'
ctx.shadowColor = 'red'
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 10
ctx.fillText('打西边儿来了一个小伙儿=>右下移', 500, 80)
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = -10
ctx.shadowOffsetY = -10
ctx.fillText('打西边儿来了一个小伙儿=>左上移', 500, 160)
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = 10
ctx.fillText('打西边儿来了一个小伙儿=>下移', 500, 240)
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = 0
ctx.shadowOffsetY = -10
ctx.fillText('打西边儿来了一个小伙儿=>上移', 500, 320)
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = -10
ctx.shadowOffsetY = 0
ctx.fillText('打西边儿来了一个小伙儿=>左移', 500, 400)
ctx.beginPath()
ctx.shadowBlur = 10
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 0
ctx.fillText('打西边儿来了一个小伙儿=>右移', 500, 480)
})
</script>
