canvas繪製多角形小練習

時間 2019-11-17

標籤 canvas 繪製多角形練習简体版

原文原文鏈接

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		div{padding:20px;}
	</style>
</head>
<body style="overflow:hidden;">
	<script>
		var starsAnim = {
			init:function(){
				canvas = document.createElement("canvas");
				ctx = canvas.getContext("2d");
				W = window.innerWidth;
				H = window.innerHeight;
				canvas.width = W;
				canvas.height = H;
				document.body.appendChild(canvas);
				var star = oneStar.init(8,ctx);
			}
		}
		/**
		 * [oneStar 建立一個多角星]
		 * @type {Object}
		 */
		var oneStar = {
			init : function(nums,ctx,r,x,y,trangles){
				this.c = this.getRandColor();  //多角星顏色
				this.r = r ? r : 50;           //多角星半徑
				this.x = x ? x : this.r/2;     //中心座標
				this.y = y ? y : this.r/2;     //中心座標
				this.ctx = ctx;
				this.trangles = trangles ? trangles : 5; //角數。默認是五角星
				this.stars = [];                         //多角星數據
				this.drawStars(nums);  //繪製多個多角星
			},
			/**
			 * drawStar 繪製多角星
			 * @param  {Number} r 半徑
			 * @param  {Number} x 中心座標
			 * @param  {Number} y 中心座標
			 * @param  {String} c 顏色
			 */
			drawStar : function(r, x, y, c){
				ctx.save();
				ctx.translate(x,y); //設置一個隨機偏移量，避免星星重疊在一塊兒
				var star = [], item=null, angle = Math.PI/this.trangles;
				ctx.rotate(-Math.PI/2);  //旋轉使星星的開始點朝上
				for(var i = 0; i < this.trangles*2; i++){
					if(!(i&1)){//不是奇數的半徑是r
						item = {
							x : r * Math.cos(angle*i),
							y : r * Math.sin(angle*i)
						}
					}else{//不是奇數的半徑是r/2
						item = {
							x : 0.5 * r * Math.cos(angle*i),
							y : 0.5 * r * Math.sin(angle*i)
						}
					}
					star.push(item);
				}
				this.stars.push(star);
				ctx.beginPath();
				ctx.strokeStyle = c;
				ctx.lineWidth = 5;
				ctx.moveTo(star[0].x,star[0].y);
				for(var i = 1; i<star.length; i++){
					ctx.lineTo(star[i].x,star[i].y);
				}

				ctx.closePath();
				// 繪製吊繩
				ctx.moveTo(star[0].x,star[0].y);
				ctx.lineTo(star[0].x+x+y,star[0].y);
				ctx.stroke();
				ctx.restore();
				

			},
			/**
			 * drawStars 繪製多角星
			 * @param  {Number} num 繪製數量
			 */
			drawStars : function(num){
				for(var i = 0; i<num; i++){
					this.r = ~~(this.getcustomRand(25,60)); //~~表示取整
					this.x = this.r + this.x + this.getcustomRand(10,180);
					this.y = this.r + this.getcustomRand(80,200);
					this.c = this.getRandColor();
					this.drawStar(this.r, this.x, this.y, this.c);
					console.log(this.stars);
					this.stars[i].trans = {
						r : this.r,
						x : this.x,
						y: this.y,
						c :this.c
					};
				}
			},
			/**
			 * getRandColor 獲取一個隨機顏色
			 * @return {String} 返回一個rgb顏色字符串
			 */
			getRandColor : function(){
				return "rgb("+(~~(Math.random()*255)) + "," + (~~(Math.random()*255)) +","+(~~(Math.random()*255))+")";
			},
			/**
			 * getcustomRand 獲取一個指定範圍的隨機~~數
			 * @param  {Number} max 範圍右邊界
			 * @param  {Number} min 範圍左邊界
			 * @return {Number}     返回隨機數
			 */
			getcustomRand : function(max,min){
				return Math.random() * (max-min) + min;
			}
		}
		starsAnim.init();
	</script>
</body>
</html>

+++++++++++預覽：+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。