vue3使用canvas的詳細(xì)指南
canvas是什么？
一個html5支持的新標(biāo)簽，見名知意，canvas就是畫板的意思，可以在canvas上畫畫。css畫三角形很簡單，但是要畫五角星呢，不妨試試canvas。
在html中使用canvas
1、canvas是html5中的一個標(biāo)簽。
新建一個html。并在body中加入canvas標(biāo)簽。
<body>
<canvas height="600" width="600"></canvas>
</body>
此時canvas已經(jīng)顯示在畫板中，只不過因為和body的顏色一樣，所以看不出來。
在head中加入css樣式。
<style>
canvas {
border:1px solid;
}
</style>
這時我們就可以看到canvas了。
2、獲取CanvasRenderingContext2D對象用于繪圖。
先給canvas一個id屬性，
<canvas id='canvas' height="600" width="600"></canvas>
獲取。
<script>
const ctx=document.querySelector('#canvas').getContext('2d');
</script>
注意，script標(biāo)簽應(yīng)該在body標(biāo)簽后（至少在canvas標(biāo)簽后），只有在canvas渲染后才能通過JavaScript代碼獲取到canvas中的CanvasRenderingContext2D對象。
<body>
<canvas height="600" width="600"></canvas>
</body>
<script>
const ctx=document.querySelector('.canvas').getContext('2d');
</script>
3、使用JavaScript代碼進(jìn)行繪畫。
<script>
const ctx=document.querySelector('#canvas').getContext('2d');
ctx.moveTo(100,100);
ctx.lineTo(100,400);
ctx.stroke();
</script>
該代碼繪制了一條直線。
關(guān)于CanvasRenderingContext2D對象更多的繪制方法請參考官方文檔。至少現(xiàn)在我們知道canvas是如何使用的了。（一定要注意要在渲染完成后才能通過JavaScript代碼獲取CanvasRenderingContext2D對象）
在vue3中使用canvas
1、創(chuàng)建vite+vue3項目并運行。
npm init vue@latest
2、創(chuàng)建我們的canvas。
這是我們的App.vue文件
<script setup> </script> <template> </template> <style scoped> </style>
創(chuàng)建我們的canvas
<script setup>
</script>
<template>
<canvas height="600" width="600"></canvas>
</template>
<style scoped>
canvas {
border: 1px solid;
}
</style>
3、獲取CanvasRenderingContext2D對象并繪制直線。
給canvas標(biāo)簽添加一個ref屬性
<canvas ref='canvas' height="600" width="600"></canvas>
獲取canvas對象
<script setup>
import {ref} from 'vue'
const canvas = ref();
</script>
渲染完成后獲取CanvasRenderingContext2D對象
<script setup>
import { onMounted, ref } from 'vue'
const canvas = ref();
onMounted(() => {
const ctx = canvas.value.getContext('2d');
})
</script>
畫一條直線
<script setup>
import { onMounted, ref } from 'vue'
const canvas = ref();
onMounted(() => {
const ctx = canvas.value.getContext('2d');
ctx.moveTo(100, 100);
ctx.lineTo(100, 400);
ctx.stroke();
})
</script>
4、模板
<script setup>
import { onMounted, ref } from 'vue'
const canvas = ref();
let ctx = ref();
const drawLine = () => {
ctx.moveTo(100, 100);
ctx.lineTo(100, 400);
ctx.stroke();
}
const initContext = () => {
ctx = canvas.value.getContext('2d');
}
onMounted(() => {
initContext();
drawLine();
})
</script>
<template>
<canvas ref='canvas' height="600" width="600"></canvas>
</template>
<style scoped>
canvas {
border: 1px solid;
}
</style>
canvas快速入門
繪制折線
一個moveTo配合多個lineTo?？梢酝ㄟ^lineWidth設(shè)置線寬，還可以設(shè)置兩個端點和轉(zhuǎn)折處的形狀（使用lineCap和lineJoin）
// 使用moveTo,lineTo,lineWidth,lineCap,lineJoin
const drawCurvedLine = () => {
ctx.moveTo(100, 100);
ctx.lineTo(400, 100);
ctx.lineTo(100, 400);
ctx.lineTo(400, 400);
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
}
繪制矩形
rect方法以及strokeRect和fillRect。效果等效：strokeRect=rect+stroke，fillRect=rect+stroke。
繪制方式：繪制邊框，使用stroke，繪制填充，使用fill。strokeStyle可以設(shè)置邊框顏色，fillStyle可以設(shè)置填充顏色。
// 使用rect,srokeStyle,stroke,fillStyle,fill
const drawStrokeRect = () => {
ctx.rect(100, 100, 100, 100);
ctx.strokeStyle = 'green';
ctx.stroke();
}
const drawFillRect = () => {
ctx.rect(300, 100, 100, 100);
ctx.fillStyle = 'blue';
ctx.fill();
}
將繪制一個綠色邊框的矩形和藍(lán)色的矩形。然而，當(dāng)一同調(diào)用時，會發(fā)現(xiàn)變成了兩個一模一樣的矩形（綠色邊框或者藍(lán)色填充）。
屬性作用域：解決上述問題，使用beginPath方法即可。beginPath將后面對于屬性的設(shè)置隔離開來，以避免覆蓋前面的屬性。
// 這里還嘗試了使用strokeRect和fillRect替代了rect、stroke、fill
const drawStrokeRect = () => {
ctx.beginPath();
ctx.strokeStyle='green';
ctx.strokeRect(100,100,100,100);
}
const drawFillRect = () => {
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.fillRect(300, 100, 100, 100);
}
繪制弧線
圓圈
ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();
圓弧
ctx.beginPath(); ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI); ctx.stroke();
扇形
ctx.beginPath(); ctx.moveTo(100,75); ctx.arc(100,75,50,90/180*Math.PI,2*Math.PI); ctx.closePath(); ctx.fill();
圓環(huán)
const RINGWIDTH = 10; ctx.beginPath(); ctx.arc(100, 75, 90, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(100, 75, 90-2*RINGWIDTH, 0, 2 * Math.PI); ctx.fillStyle = 'white'; ctx.fill();
補充：
- 如你所見，繪制扇形時使用了closePath，意思是將所有端點連接起來（一般是將終點和起點連接起來，形成一個閉合圖形。只有圖形閉合時，fill才能生效）。
- 所有函數(shù)的參數(shù)不需要單位。（設(shè)置字體時，ctx.font=‘40px’，需要帶單位，但確實不是函數(shù)的參數(shù)）
- 需要角度作為參數(shù)時，都是以弧度的形式提供。計算公式，弧度=角度*Math.PI/180。90度，記為90*Math.PI/180。
- 更多關(guān)于畫布的使用，可以查看HTML Canvas 參考手冊 (w3school.com.cn)
總結(jié)
到此這篇關(guān)于vue3使用canvas的文章就介紹到這了,更多相關(guān)vue3使用canvas內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue3+TypeScript實現(xiàn)遞歸菜單組件的完整實例
Vue.js中的遞歸組件是一個可以調(diào)用自己的組件,遞歸組件一般用于博客上顯示評論,形菜單或者嵌套菜單,文章主要給大家介紹了關(guān)于Vue3+TypeScript實現(xiàn)遞歸菜單組件的相關(guān)資料,需要的朋友可以參考下2021-08-08
在Vue中,路由攔截器主要用于在導(dǎo)航到某個路由前或者離開某個路由時進(jìn)行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
使用ElementUI循環(huán)生成的Form表單添加校驗
這篇文章主要介紹了使用ElementUI循環(huán)生成的Form表單添加校驗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue頭像處理方案，實現(xiàn)思路主要是通過獲取后臺返回頭像url，判斷圖片寬度，高度。具體實例代碼大家參考下本文2018-07-07
在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導(dǎo)入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源2024-09-09
這篇文章主要介紹了詳解vuejs之v-for列表渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue服務(wù)區(qū)緩存分為頁面緩存、組建緩存和接口緩存，本文通過實例代碼逐一給大家介紹，本文重點給大家介紹vue服務(wù)端渲染添加緩存的方法，感興趣的朋友跟隨小編一起看看吧2018-09-09
vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)
這篇文章主要給大家介紹了關(guān)于vue中json格式化顯示數(shù)據(jù)(vue-json-viewer)的相關(guān)資料,Vue-json-viewer是一個Vue組件,用于在Vue應(yīng)用中顯示JSON數(shù)據(jù)的可視化工具,需要的朋友可以參考下2024-05-05
vue3使用localStorage實現(xiàn)登錄注冊功能實例
這篇文章主要給大家介紹了關(guān)于vue3使用localStorage實現(xiàn)登錄注冊功能的相關(guān)資料, localStorage這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題,需要的朋友可以參考下2023-06-06