canvas簡介

canvas是uniapp中提供的一個組件,用于生成自定義的圖形界面。通過canvas,我們可以通過JavaScript代碼在頁面上繪制各種圖形和圖像。

使用canvas

在頁面中添加canvas

首先需要在頁面的template中添加一個canvas組件:

<template><view><canvas canvas-id="myCanvas" id="myCanvas"></canvas></view>  
</template>

• canvas-id是canvas的唯一標識
• id則是組件的id

獲取canvas上下文

要在canvas上繪圖,需要先獲取canvas的上下文context,通過它才能對canvas進行操作:

const context = uni.createCanvasContext('myCanvas')

繪制基本形狀

拿到context后,就可以通過它提供的API繪制各種形狀了:

context.rect(x, y, width, height) // 繪制矩形
context.arc(x, y, r, sAngle, eAngle) // 繪制圓弧
context.lineTo(x, y) // 繪制直線

設置樣式

canvas的繪圖樣式可以通過context的屬性進行設置,例如:

context.setFillStyle('red') // 設置填充色
context.setLineWidth(2) // 設置線寬

繪制路徑

可以通過以下方法繪制路徑:

context.beginPath() // 開始路徑
context.moveTo(x, y) 
context.lineTo(x, y)
context.closePath() // 閉合路徑
context.stroke() // 描邊路徑
context.fill() // 填充路徑

完成繪制

繪制完成后需要調用context.draw才會進行實際的繪制渲染:

context.draw()

以上就是uniapp中canvas的一些基礎用法,通過它可以繪制出各種自定義的圖形界面