uniapp开发微信小程序实现canvas画圆形

直接copy代码即可（感兴趣可扫码看看）

<template>
	<view class="canvas-content">
		<!-- 画布 -->
    <canvas
      class="mycanvas"
      disable-scroll="true"
      canvas-id="Canvas"
      id="Canvas"
    >
    </canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        ctx: null
			}
		},
		onLoad() {
      this.ctx = uni.createCanvasContext("Canvas")
		},
    onShow () {
      this.drawArc()
    },
		methods: {
      drawArc () {
        // 非填充圆
        this.ctx.beginPath();
        this.ctx.arc(50, 50, 20, 0, 2 * Math.PI);
        this.ctx.setStrokeStyle('red');
        this.ctx.stroke();
        this.ctx.draw(true);

        // 填充圆
        this.ctx.beginPath();
        this.ctx.arc(50, 100, 20, 0, 2 * Math.PI);
        this.ctx.setFillStyle('red');
        this.ctx.fill();
        this.ctx.draw(true);
      }
		}
	}
</script>