46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||
<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;"></canvas>
|
||
|
||
<!-- 添加一个按钮，用于触发绘图 -->
|
||
<button @click="handleDraw()">点击绘制圆形</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue'
|
||
|
||
// 定义绘图函数
|
||
function draw() {
|
||
const ctx = uni.createCanvasContext('canvas') // 创建canvas绘图上下文
|
||
|
||
// 绘制外圆
|
||
ctx.beginPath() // 开始路径
|
||
ctx.arc(100, 100, 80, 0, Math.PI * 2) // 在坐标(100, 100)处绘制半径为80的圆形
|
||
ctx.setFillStyle('rgba(0, 0, 0, 1)') // 设置填充颜色为黑色，无透明度
|
||
ctx.fill() // 填充所创建的路径
|
||
|
||
// 绘制内圆以形成环形效果
|
||
ctx.beginPath() // 开始新的路径
|
||
ctx.arc(100, 100, 75, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
|
||
ctx.setFillStyle('white') // 设置填充颜色为白色
|
||
ctx.fill() // 填充以“清除”内部区域，形成环形
|
||
ctx.draw() // 将上述所有操作提交到canvas进行渲染
|
||
}
|
||
|
||
// 按钮点击事件处理函数
|
||
const handleDraw = () => {
|
||
draw(); // 调用绘图函数
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式部分 */
|
||
button {
|
||
margin-top: 10px;
|
||
/* 给按钮设置一些上边距以避免过于紧凑 */
|
||
}
|
||
</style> |