50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||
<canvas canvas-id="canvas" id="canvas" style="width: 200px; height: 200px;border: 1px solid red;" :width="canvasWidth" :height="canvasHeight"></canvas>
|
||
|
||
<!-- 添加一个按钮，用于触发绘图 -->
|
||
<button @click="handleDraw">点击绘制圆形</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted ,getCurrentInstance } from 'vue'
|
||
|
||
const canvasWidth = ref(200) // 动态设置Canvas宽度
|
||
const canvasHeight = ref(200) // 动态设置Canvas高度
|
||
const instance = getCurrentInstance()
|
||
// 定义绘图函数
|
||
function draw() {
|
||
const ctx = uni.createCanvasContext('canvas',instance) // 创建canvas绘图上下文
|
||
console.log(ctx,'12');
|
||
// 绘制外圆
|
||
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()
|
||
}
|
||
|
||
// 按钮点击事件处理函数
|
||
const handleDraw = () => {
|
||
draw(); // 调用绘图函数
|
||
}
|
||
|
||
onMounted(() => {
|
||
// draw()
|
||
// 确保在组件挂载后可以获取到Canvas元素
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
button {
|
||
margin-top: 10px;
|
||
}
|
||
</style> |