外部网页代码:
<template>
<div style="background-color: aqua;">
<h1>canvas</h1>
<canvas ref="myCanvas" width="1000" height="800" z-index="1"/>
</div>
</template>
<script>
export default {
mounted() {
const canvas = this.$refs.myCanvas
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'blue'
ctx.fillRect(100, 200, 200, 200)
ctx.font = '30px Arial'
ctx.fillStyle = 'white'
ctx.fillText('Hello, world!', 120, 300)
ctx.fillStyle = 'red'
ctx.fillRect(200, 500, 100, 100)
}
}
</script>