canvas js绘制多个闪烁五角星

canvas js绘制多个闪烁五角星

创建画布

	const canvas = document.createElement("canvas");
    const innerHeight="800";
    const innerWidth="700";
    canvas.width=innerWidth;
    canvas.height=innerHeight;

方法封装与储蓄

	//所有数据储存
  	var numBer=[];
  	//在某个范围内生成随机数
    function randomTo(start, end) {
      return Math.floor(Math.random() * (end- start+ 1) + start);
    }
    //随机0-1
	function insPot(){
		return Math.random().toFixed(2);
	}
    // 储存每个五角星对象
    function Circle(onRadius, onLeft, onTop, color) {
      this.onRadius = onRadius;
      this.onLeft = onLeft;
      this.onTop = onTop;
      this.color = color;
    }
    /*添加对应的数据*/
  	function original(){
  		let onRadius=randomTo(5,10);
  		let onLeft=randomTo(onRadius*2,innerWidth);
  		let onTop=randomTo(onRadius*2,innerHeight);
  		let colors = [
            '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
            '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
            '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
            '#FF5722'
        ];
     	let color = colors[randomTo(0, 15)];
		let circle = new Circle(onRadius, onLeft, onTop, color);
		numBer.push(circle);
  	}

绘制方法

	// 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    // 循环绘制出所有五角星
    numBer.forEach(function(value,index){
			let inPot=insPot();
			context.beginPath();
			if(value.onTop<0){
				delete numBer[index];
				original();
				return false;
			}else{
				numBer[index].onTop=value.onTop-2;
			}
    		//设置是个顶点的坐标，根据顶点制定路径   
    		context.rotate(inPot*100*Math.PI/180);
    		/*context.scale( 0 , 0 , canvas.width, canvas.height)*/
		    for (var i = 0; i < 5; i++) {   
		        context.lineTo(Math.cos( ( 18 + i * 72) / 180*Math.PI)*value.onRadius+value.onLeft, 
		        -Math.sin((18+i*72)/180*Math.PI)*value.onRadius+value.onTop);
		        context.lineTo(Math.cos( ( 54 + i * 72) / 180*Math.PI) *value.onRadius/2 +value.onLeft, 
		        -Math.sin((54+i*72)/180*Math.PI)*value.onRadius/2+value.onTop);
		    }
		    context.closePath();   
		    //设置边框样式以及填充颜色   
		    context.fillStyle = value.color;  //填充色 
		    context.globalAlpha = inPot;
		    context.fill();   
		    context.stroke(); 
		});

效果啦