vue3使用canvas的詳細指南
canvas是什么？
一個html5支持的新標簽，見名知意，canvas就是畫板的意思，可以在canvas上畫畫。css畫三角形很簡單，但是要畫五角星呢，不妨試試canvas。
在html中使用canvas
1、canvas是html5中的一個標簽。
新建一個html。并在body中加入canvas標簽。
<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標簽應(yīng)該在body標簽后（至少在canvas標簽后），只有在canvas渲染后才能通過JavaScript代碼獲取到canvas中的CanvasRenderingContext2D對象。
<body>
<canvas height="600" width="600"></canvas>
</body>
<script>
const ctx=document.querySelector('.canvas').getContext('2d');
</script>
3、使用JavaScript代碼進行繪畫。
<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標簽添加一個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();
}
將繪制一個綠色邊框的矩形和藍色的矩形。然而，當一同調(diào)用時，會發(fā)現(xià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?文件切片上傳的項目實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果
這篇文章主要介紹了vue實現(xiàn)編輯器鍵盤抬起時內(nèi)容跟隨光標距頂位置向上滾動效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
本文將探討 Vue 事件處理中常見的上下文問題及其解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage
這篇文章主要介紹了vue實現(xiàn)動態(tài)綁定行內(nèi)樣式style的backgroundImage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程
在最近的一個項目中我需要實現(xiàn)表格的翻頁,并且還要實現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關(guān)于vue如何基于el-table實現(xiàn)多頁多選及翻頁回顯過程的相關(guān)資料,需要的朋友可以參考下2022-12-12
本文主要介紹了Vue封裝遠程下拉框組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動的Web界面,采用漸進式設(shè)計,易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法2024-09-09
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07