使用uniapp写一个canvas圆形
时间: 2023-05-14 08:04:31 浏览: 111
Sure, here's an example of how to create a circular canvas using uniapp:
<template>
<canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>
<script>
export default {
mounted() {
const canvas = uni.createCanvasContext('myCanvas', this);
const width = uni.upx2px(200);
const height = uni.upx2px(200);
const radius = width / 2;
const centerX = width / 2;
const centerY = height / 2;
canvas.beginPath();
canvas.arc(centerX, centerY, radius, 0, 2 * Math.PI);
canvas.setFillStyle('#000000');
canvas.fill();
canvas.closePath();
canvas.draw();
}
}
</script>
This code creates a canvas element with an ID of "myCanvas" and sets its width and height to 100%. In the mounted() lifecycle hook, we create a canvas context using uni.createCanvasContext() and set the canvas dimensions to 200x200 pixels. We then calculate the center point and radius of the circle, and use canvas.arc() to draw the circle. Finally, we set the fill style to black and call canvas.fill() to fill the circle with color.