uniapp canvas绘图组件的使用

<template>
	<view>
		<canvas style="width: 1000rpx; height: 1000rpx;" canvas-id="text"></canvas>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onReady() {
			var ctx = uni.createCanvasContext('text')
			
			 // 绘制坐标轴
			    ctx.setStrokeStyle('#000000')
			    ctx.moveTo(30, 180)//这个是绘图的起始点
			    ctx.lineTo(30, 20)//这个是移动到哪个位置
				ctx.moveTo(30, 180)
			    ctx.lineTo(280, 180)
			    ctx.stroke() //画线，绘制路径
			    // 绘制柱状图
			    ctx.setFillStyle('#ff0000')//设置填充色
			    ctx.fillRect(40, 160, 40, 20)//绘制的起始位置和宽高，绘制实心矩形，这里的起始位置说的是从矩形的中间开始绘制，也就是高度的一半
			    ctx.fillText('A', 40, 190) //标注字母
			    ctx.setFillStyle('#00ff00')
			    ctx.fillRect(100, 140, 40, 40)
			    ctx.fillText('B', 100, 190) 
			    ctx.setFillStyle('#0000ff')
			    ctx.fillRect(160, 120, 40, 60)
			    ctx.fillText('C', 160, 190) 
			    ctx.setFillStyle('#ffff00')
			    ctx.fillRect(220, 100, 40, 80)
			    ctx.fillText('D', 220, 190) 
			    ctx.draw()//绘制结果
		}
	}
</script>

<style lang="scss">

</style>