uni-app：canvas-图形实现1

效果

代码

<template>
	<view>
		<!-- 创建了一个宽度为300像素，高度为200像素的canvas元素。canvas-id属性被设置为"firstCanvas"，可以用来在JavaScript中获取该canvas元素的上下文对象。 -->
		<canvas style="width:200px; height: 200px; border: 1px solid black;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>	
</template>
<script>
export default {
	onReady: function (e) {
		//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个 <canvas> 元素上进行绘制。
		var context = uni.createCanvasContext('firstCanvas')
		//绘制路径中的线条。
		context.setStrokeStyle("#aaaaff")
		// 设置线条的宽度为2个像素。
		context.setLineWidth(2)
		// 绘制横线
		context.beginPath(); // 开始路径绘制
		context.moveTo(100, 0); // 将起点移动到 (0, 100)
		context.lineTo(100, 50);
		context.stroke(); // 绘制线条
		// 绘制冕线条
		var startX = 100; // 冕线条起始点的x坐标
		var startY = 100; // 冕线条起始点的y坐标
		var radius = 50; // 冕线条的半径
		var startAngle = Math.PI * 0.25; // 冕线条的起始角度（以弧度表示）
		var endAngle = Math.PI * 1.75; // 冕线条的结束角度（以弧度表示）
		var anticlockwise = false; // 是否逆时针绘制
		context.beginPath();
		context.arc(startX, startY, radius, startAngle, endAngle, anticlockwise);
		context.stroke(); // 绘制线条
		// 将之前的绘图操作渲染到画布上。
		context.draw()
	},
	methods: {
	}
}
</script>