canvas 简单使用（一）

canvas画布大家肯定都了解过，这里简单说一下在小程序中常用的属性和方法

//template
	<canvas style="width: 374rpx;height: 502rpx;" canvas-id="canvasBox" id="canvasBox" class="canvas-box" :class="{'on':canvasAsync}"></canvas>

async createCanvasFn (){
//初始值 1/2/3
let initialValue1 = 0.7,
	initialValue2 = 0.3,
	initialValue3 = 0.1;
				
	// 获取设备宽度，算出比例，让canvas自适应	
	let unit = await new Promise((resolve, reject)=>{
		wx.getSystemInfo({
		  success:  (res) =>{
			resolve(res.windowWidth/375)
		  }
		})
	});
	//创建 canvas 绘图上下文
	let context = uni.createCanvasContext('canvasBox'),
		// 360度 ：Math.PI = π = 180°
		num = 2*Math.PI,
		// 计算三个半径值：我计划画三个圆：半径不统一，根据需求来（这里可以过滤掉）
		radius1 = initialValue1 >0 ? 84 :0,
		radius2 = radius1 ==84  ? 70  : (initialValue2 >0 ? 84 :0) ,
		radius3 = radius2 == 70 ? 53 : (radius2 == 84 ? 70 :84) ;
		//如果都为0时，然他们均分，canvas设为半透明
		if(!initialValue1 && !initialValue2 && !initialValue3){
			initialValue1 = 0.3333
			initialValue2 = 0.3333
			initialValue3 = 0.3333
			
			radius1 = 84;
			radius2 = 70;
			radius3 = 53;
			//canvasAsync 为true时，css  设置 opacity: .5;
			this.canvasAsync = true;
			//全局半透明  跟后边的阴影有冲突，所以没用，改用的css 
			//context.globalAlpha = 0.5;
		}
		
		// - num/4   逆时针90度 , 默认是从3点的位置起，逆转了90度，改为从12点位置 (个人喜好，可以不考虑)
		let num1 = num * initialValue1 - num /4,
			num2 = num1 + num*initialValue2,
			num3 = num2 + num*initialValue2;

	    //大圆
		context.beginPath();
		context.arc(94 * unit, 116* unit, radius1* unit,  - (num /4) , num1);
		context.fillStyle = '#2076FF';
		context.lineTo(94 * unit, 116* unit);
		
		//阴影
		context.shadowColor = 'rgba(32, 118, 255, 0.5)'
		context.shadowBlur ='10'
		context.fill()

		//画线
		// context.lineTo(100* unit,40* unit);
		// context.lineTo(110* unit,30* unit)
		// context.lineTo(160* unit,30* unit)
		// context.strokeStyle = '#9A9A9A';
		// context.stroke();
		
		
		//中园
		context.beginPath();
		context.arc(94 * unit, 116* unit, radius2* unit, num1, num2);
		context.fillStyle = '#FFAE00';
		context.lineTo(94 * unit, 116* unit);
		
		
		//阴影
		context.shadowColor = 'rgba(255, 173, 0, 0.5)'
		context.shadowBlur ='10'
		context.fill()
		
		//小园
		
		context.beginPath();
		context.shadowBlur ='0'
		context.arc(94 * unit, 116* unit, radius3* unit, num2,num3 );
		context.fillStyle = '#FF2C00';
		context.lineTo(94 * unit, 116* unit);
		
		//阴影
		context.shadowColor = 'rgba(255, 43, 0, 0.5)'
		context.shadowBlur ='10'
		context.fill()
		//中心
		
		context.beginPath();
		context.shadowBlur ='0'
		context.arc(94 * unit, 116* unit, 36* unit, 0, Math.PI*2);
		context.fillStyle = '#FFFFFF';
		context.shadowColor = '#FFFFFF'
		context.fill();
		
		context.draw()
}

//css
.canvas-box{
	&.on{
		opacity: .5;
	}
}