vue中的Canvas使用及说明

<canvas width="700" height="700" ref="canvas">
        您的浏览器版本过低,不支持canvas,请升级浏览器或使用chrome浏览器
</canvas>
<button @click="save">保存Canvas</button>

canvas {
    display: block;
    margin: 0 auto;
    border: solid 2px #999;
}

<script setup>
import { onMounted, ref } from 'vue'; // 从vue导入钩子函数和ref

// 找到canvas节点，可以使用js的document寻找，也可以使用vue的ref寻找

const canvas = document.querySelector('canvas')

const canvas = ref(null)

</script>

const ctx = canvas.getContext('2d') // 使用document找到的

const ctx = canvas.value.getContext('2d') // 使用ref找到的

ctx.beginpath() // 开启一条路径
ctx.moveTo(x1, y1) // 将画笔移动到一个点
ctx.lineTo(x2, y2) // 将画笔移动到第二个点
ctx.strokeStyle = '#333' // 设置描边的颜色
ctx.width = 3 // 设置线宽，取值为数值
ctx.stroke() // 开始画
ctx.closePath() // 关闭路径

ctx.beiginPath() // 如果不重新开启路径，会和上一次画的连上
ctx.fillStyle = '#0f0' // 填充样式
ctx.fillRect(x1, y1, x2, y2) // 填充
ctx.closePath()

ctx.clearRect(x1, y1, x2, y2)

ctx.beginPath() // 开启新路径
ctx.arc(x1, y1, 圆形半径, 角度值1, 角度值2,顺时针还是逆时针)
// 例如
ctx.arc(100, 100, 100, 0, Math.PI, true);
ctx.stroke()

ctx.font = '30px 微软雅黑'

ctx.fillText('文字内容', x1, y1)

ctx.fillText('canvas',100, 100) // 实心文字

ctx.strokeText('canvas', 100, 100) // 空心文字

//用ref找到的元素，要加.value 
let base64 = canvas.value.toDataURL('image/jpeg', 1);

// 模板区绑定的save方法
cosnt save = () => {
    canvas.value.toBlob(blob => {
        let blobURL = URL.createObjectURL(blob);
        let aNode = document.createElement('a')
        aNode.href = blobURL 
        aNode.download = 'Canvas图片'
        aNode.click()
    })
}

let img = new Image()
image.src = '要加载的图片路径'
image.onload = () => {
    ctx.beginPath()
    ctx.drawImage(img, x1, y1)
    ctx.font = '30px 宋体'
    ctx.fillText('这是水印', x1, y1)
}