46 lines
1.5 KiB
Vue
46 lines
1.5 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 定义canvas画布 // 设置canvas大小为200x200像素 -->
|
||
<canvas
|
||
canvas-id="canvas"
|
||
id="canvas"
|
||
style="width: 200px; height: 200px;"
|
||
></canvas>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted } 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, 255, 0.3)') // 设置填充颜色为蓝色，透明度为0.3
|
||
ctx.fill() // 填充所创建的路径
|
||
|
||
// 绘制内圆以形成环形效果
|
||
// ctx.beginPath() // 开始新的路径
|
||
// ctx.arc(100, 100, 60, 0, Math.PI * 2) // 在相同中心点(100, 100)，但半径为60的圆形
|
||
// ctx.setFillStyle('white') // 设置填充颜色为白色
|
||
// ctx.fill() // 填充以“清除”内部区域，形成环形
|
||
|
||
// // 如果需要绘制一个方块，例如在(50, 50)位置绘制一个40x40像素的正方形：
|
||
// ctx.beginPath() // 开始一个新的路径
|
||
// ctx.rect(50, 50, 40, 40) // 在画布上绘制一个左上角位于(50, 50)，宽高都是40像素的矩形
|
||
// ctx.setFillStyle('green') // 设置填充颜色为绿色
|
||
// ctx.fill() // 填充矩形
|
||
|
||
ctx.draw() // 将上述所有操作提交到canvas进行渲染
|
||
}
|
||
|
||
onMounted(() => {
|
||
draw() // 页面加载完成后调用draw函数开始绘图
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 样式部分 */
|
||
</style> |