使用uniapp写一个canvas圆形
时间: 2023-05-14 22:04:31 浏览: 281
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
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.
阅读全文