首頁 > 軟體

vue3使用canvas的詳細指南

2023-04-02 06:00:59

canvas是什麼?

一個html5支援的新標籤,見名知意,canvas就是畫板的意思,可以在canvas上畫畫。css畫三角形很簡單,但是要畫五角星呢,不妨試試canvas。

在html中使用canvas

1、canvas是html5中的一個標籤。

新建一個html。並在body中加入canvas標籤。

<body>
    <canvas height="600" width="600"></canvas>
</body>

此時canvas已經顯示在畫板中,只不過因為和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標籤應該在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>

該程式碼繪製了一條直線。

關於CanvasRenderingContext2D物件更多的繪製方法請參考官方檔案。至少現在我們知道canvas是如何使用的了。(一定要注意要在渲染完成後才能通過JavaScript程式碼獲取CanvasRenderingContext2D物件)

在vue3中使用canvas

1、建立vite+vue3專案並執行。

npm init vue@latest

2、建立我們的canvas。

這是我們的App.vue檔案

<script setup>

</script>

<template>

</template>

<style scoped>

</style>

建立我們的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設定線寬,還可以設定兩個端點和轉折處的形狀(使用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可以設定邊框顏色,fillStyle可以設定填充顏色。

// 使用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();
}

將繪製一個綠色邊框的矩形和藍色的矩形。然而,當一同呼叫時,會發現變成了兩個一模一樣的矩形(綠色邊框或者藍色填充)。

屬性作用域:解決上述問題,使用beginPath方法即可。beginPath將後面對於屬性的設定隔離開來,以避免覆蓋前面的屬性。

// 這裡還嘗試了使用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();

圓環

  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才能生效)。
  • 所有函數的引數不需要單位。(設定字型時,ctx.font=‘40px’,需要帶單位,但確實不是函數的引數)
  • 需要角度作為引數時,都是以弧度的形式提供。計算公式,弧度=角度*Math.PI/180。90度,記為90*Math.PI/180。
  • 更多關於畫布的使用,可以檢視HTML Canvas 參考手冊 (w3school.com.cn)

總結

到此這篇關於vue3使用canvas的文章就介紹到這了,更多相關vue3使用canvas內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com