canvas学习（五）：五颜六色的星星

先来张效果图：
再来张五角星各个点坐标的计算过程图：
最后上代码：
window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");
	if(myCanvas.getContext("2d")){
		myCanvas.width = document.documentElement.clientWidth-20;;
		myCanvas.height = document.documentElement.clientHeight-20;;
		var context =myCanvas.getContext("2d");
		//绘制一个五角星
		//alert(myCanvas.width+"\t"+myCanvas.height);1420/720
		//dramStar(context,300,150,300,300,3,"#fb3","#fd5",20);
		
		//绘制更多的星星
		var colors=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];//绘制各种颜色的星星
		//colors="#fd5";//绘制一种颜色的星星
		drawMoreStars(context,200,10,colors);
	}else{
		return false;
	}
}

/**
*该方法用来绘制五角星（五角星的绘制可以理解成在两个大圆中绘图）
*@param cxt:canvas的上下文环境
*@param R1:大圆的半径，用来绘制向外的五个点
*@param R2:小圆的半径，用来绘制向内的五个点
*@param x:在x方向的偏移量，若是不设置，默认为0,做左上角进行绘制
*@param y:在y方向的偏移量，若是不设置，默认为0，做左上角进行绘制
*@param lineWidth:边线粗细
*@param lineColor:边线颜色
*@param fillColor:五角星的填充色
*@param rot:旋转角度
*/
function dramStar(cxt,R1,R2,x,y,lineWidth,lineColor,fillColor,rot){
	//绘制五角星
	cxt.beginPath();
	for(var i=0;i<5;i++){
		//绘制大圆中的五个角
		//第一个角为18度，以后大圆的每个角都是（18+72的倍数）度
		//(18+i*72)/180*Math.PI:将角度转换成弧度
		//因为绘制五角星的坐标系y轴与普通的坐标系相反，x轴以上为负数，x轴以下为正数，所以此处y轴的坐标为负数
		cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R1+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R1+y);
		//绘制小圆中的五个角
		//与大圆的各个角一致，第一个角为54度，以后每个角都是（54+72的倍数）度
		cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*R2+x,-Math.sin((54+i*72-rot)/180*Math.PI)*R2+y);
	}
	cxt.closePath();

	cxt.lineWidth=lineWidth;//边框线粗细
	cxt.fillStyle=fillColor;//填充色
	cxt.strokeStyle=lineColor;//设置边框线的颜色
	cxt.lineJoin="round";//边角
	//先填充，后描边
	cxt.fill();
	cxt.stroke();
}

/**
*该方法用来绘制各种颜色的星星
*@param cxt:canvas的上下文环境
*@param num:绘制的星星的数量
*@param radius:星星半径，以后随机生成半径会在radius与2*radius之间
*@param colors:颜色，可能是数组，也可能只是一个颜色
**/
function drawMoreStars(cxt,num,radius,colors){
	//绘制一个背景色
	cxt.fillStyle="black";
	cxt.fillRect(0,0,myCanvas.width,myCanvas.height);//绘制一个与当前画布一样大的矩形，背景色为fillStyle设置的颜色		
	
	//绘制一片星空
	var color="white";//默认为白色的星星
	for(var i=0;i<num;i++){
		var R1 = Math.random()*radius+radius;//大圆直径20-40之间
		var R2 = R1/2;//小圆半径
		var x = Math.random()*myCanvas.width;//x轴的偏移量
		//左侧不出界
		if(x<R1)x=R1;
		//右侧不出界
		if(x>=myCanvas.width-R1){x=myCanvas.width-R1;}

		var y = Math.random()*myCanvas.height;//y轴的偏移量
		//上面不出界
		if(y<R1) y=R1;
		//下面不出界
		if(y>=myCanvas.height-R1){y=myCanvas.height-R1;}
		
		if(isArray(colors)){//给定的是数组，那么从数组中随机获取一个颜色
			color=colors[Math.floor(Math.random()*colors.length)];//星星的颜色
		}else{//只是一个颜色，直接设置就好
			color=colors;
		}
		//alert(x+"\t"+myCanvas.width+"\t"+R1+"\n"+y+"\t"+myCanvas.height);
		var rot = Math.random()*360;//旋转角度在0-360度之间
		dramStar(cxt,R1,R2,x,y,0,color,color,rot);
	}
}
//判断是否为数组
var isArray = function(obj) { 
	return Object.prototype.toString.call(obj) === '[object Array]'; 
};
最后感谢老师的分享！
canvas学习（五）：五颜六色的星星

猜你喜欢
