vue 使用 createjs 绘制扇形

导入 createjs 依赖

npm install createjs-module

基本使用

<template>
  <div class="circle">
    <canvas id="canvas" height="200" width="200"></canvas>
  </div>
</template>
<script>
import createjs from "createjs-module";// 引入createjs
export default{
	data(){
		timer:"",
		angle: 320,//角度
	},
	mounted() {
	   this.drawArc(100, 100, 100, a, 0, "red");
 	},
	methods:{
		// x,y: 位置, angle: 角度, start: 开始角度, color: 绘制的颜色 
		drawArc(x,y,r,angle,start,color){
			let canvas = document.getElementById("canvas");
      		let stage = new createjs.Stage(canvas);
      		let arc = new createjs.Shape();
      		arc.graphics.clear();
	      	arc.graphics.beginFill(color);
	      	arc.graphics.moveTo(x, y);
	      	
			angle = (Math.abs(angle) > 360) ? 360 : angle;
			//这里的起始角度和扇形弧度都用角度表示，由于三角函数用的弧度制，这里先转换为弧度。
      		start= start* Math.PI / 180;
      		
      		let x1 = x + r * Math.cos(start);
		    let y1 = y + r * Math.sin(start);
		    let endAngle = start + angle * Math.PI / 180;
			
			arc.graphics.lineTo(x1, y1);
      		arc.graphics.arc(x, y, r, start, endAngle, false);
      		if (angle != 360) {
	        	arc.graphics.lineTo(x, y);
	      	}
	        arc.graphics.endFill();
		    stage.addChild(arc);// 添加到舞台上
		    stage.update();// 刷新舞台
		}
	}
}
</script>

添加动态效果秩序在绘制的时候添加一个定时器( 如有更好方法可在评论区提出 ‾◡◝ )

mounted(){
	let i = 0;
	this.timer = setInterval(()=>{
		i++;
		if(a === this.angle){
			clearInterval(this.timer);
		}
		this.drawArc(100, 100, 100, a, 0, "red");
	},10)
}