vue中的Canvas使用及說明

更新時間：2025年10月28日 10:04:43 作者：m0_63466615

文章詳細介紹了HTML5 Canvas的模板區(qū)、樣式區(qū)和腳本區(qū)的使用方法,包括如何設(shè)置Canvas的寬高、水平居中、獲取Canvas元素、繪制圖形（直線、矩形、圓、文字）、轉(zhuǎn)換為Base64、下載圖片以及加載圖片并添加文字水印等操作

1.模板區(qū)（template）

（1） canvas的寬高只能通過在行內(nèi)設(shè)置width和height，不能使用css設(shè)置，否則會導(dǎo)致圖形拉伸

（2）當?shù)桶姹镜臑g覽器不支持canvas標記時，會把canvas展示為一個普通的標記，就會顯示在canvas內(nèi)部寫的提示語，而如果瀏覽器支持canvas,內(nèi)部的提示語則不會顯示

<canvas width="700" height="700" ref="canvas">
        您的瀏覽器版本過低,不支持canvas,請升級瀏覽器或使用chrome瀏覽器
</canvas>
<button @click="save">保存Canvas</button>

2.樣式區(qū)（style區(qū)）

canvas實際上是一個內(nèi)聯(lián)元素，要設(shè)置它在頁面水平居中，需要把它設(shè)置為塊級元素，（再次聲明，不可以在css里設(shè)置canvas的寬高）

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

3.腳本區(qū)(script區(qū))

（1）獲得canvas

<script setup>
import { onMounted, ref } from 'vue'; // 從vue導(dǎo)入鉤子函數(shù)和ref

// 找到canvas節(jié)點，可以使用js的document尋找，也可以使用vue的ref尋找

const canvas = document.querySelector('canvas')

const canvas = ref(null)

</script>

兩個的區(qū)別就是：

用ref找到的canvas使用時需要使用canvas.value,

而document.querySelector找到的canvas使用時不需要加.value

（2）獲取畫筆

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

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

（3）畫線（兩點確定一條直線）

ctx.beginpath() // 開啟一條路徑
ctx.moveTo(x1, y1) // 將畫筆移動到一個點
ctx.lineTo(x2, y2) // 將畫筆移動到第二個點
ctx.strokeStyle = '#333' // 設(shè)置描邊的顏色
ctx.width = 3 // 設(shè)置線寬，取值為數(shù)值
ctx.stroke() // 開始畫
ctx.closePath() // 關(guān)閉路徑

（4）畫矩形

ctx.beiginPath() // 如果不重新開啟路徑，會和上一次畫的連上
ctx.fillStyle = '#0f0' // 填充樣式
ctx.fillRect(x1, y1, x2, y2) // 填充
ctx.closePath()

（5）擦除

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

（6）畫圓

ctx.beginPath() // 開啟新路徑
ctx.arc(x1, y1, 圓形半徑, 角度值1, 角度值2,順時針還是逆時針)
// 例如
ctx.arc(100, 100, 100, 0, Math.PI, true);
ctx.stroke()

（7）畫字（寫字）

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

ctx.fillText('文字內(nèi)容', x1, y1)

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

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

（8）canvas轉(zhuǎn)換base64地址

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

（9）下載canvas畫的圖

// 模板區(qū)綁定的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()
    })
}

（10）加載圖片并加文字水印

let img = new Image()
image.src = '要加載的圖片路徑'
image.onload = () => {
    ctx.beginPath()
    ctx.drawImage(img, x1, y1)
    ctx.font = '30px 宋體'
    ctx.fillText('這是水印', x1, y1)
}