<!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>

+++++++++++预览：+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

canvas绘制多角形小练习的更多相关文章

  1. canvas绘制简单小铅笔

    对应HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  2. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  3. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  4. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  5. 使用canvas绘制时钟

    使用canvas绘制时钟  什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  8. HTML5 canvas 绘制五星红旗

    这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...

  9. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

随机推荐

  1. 20160916-3：mysql主从复制

    一.什么是主从复制 将一个数据库节点的数据拷贝到一个或多个数据库节点(主节点—>从节点) 二.主从复制的原理 [简述]:将主节点上的变更操作存储到binlog,从节点建立了到主节点的复制关系后, ...

  2. Null和Undefined类型

    Null和Undefined类型都只有唯一的特殊值,即null和undefined.不过null是关键字而undefined不是. JavaScript把两者定义为相等的,如下代码可以验证: aler ...

  3. Jsp页面截取字符串

    用jstl标签: 首先页面中引入<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions ...

  4. angular2表单初体验

    1.创建movie模型. 最近对angular2比较感兴趣,跟着官网学习一段,练习了一个表单demo! src/app/movie.ts文件: export class Movie{ construc ...

  5. linux安装jdk_1.8

    转载自http://blog.csdn.net/ldl22847/article/details/7605650 1.下载jdk的rpm安装包,这里以jdk-8u141-linux-x64.rpm为例 ...

  6. Java替换字符串中的占位符

    在开发中,会有动态配置字符串其中的某些字符,如何使用字符中的占位符,并且在代码动态替换占位符实现动态配置字符串! 1.定义字符串时,再string文件添加字符串: 注意!记得要在字符文件中加上这些: ...

  7. 剑指offer 面试21题

    面试21题: 题目:调整数组的顺序使奇数位于偶数前面 题一:输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 解题思路:使用两个指针 ...

  8. js判断有无属性

    访问元素属性 getAttribute 不存在返回null,特性名可不区分大小写 dom对象访问公共属性,自定义属性不能访问,div.id 访问对象属性 1.使用in关键字 该方法可以判断对象的自有属 ...

  9. 字典树 trie树 学习

    一字典树 字典树,又称单词查找树,Trie树,是一种树形结构,哈希表的一个变种   二.性质 根节点不包含字符,除根节点以外的每一个节点都只包含一个字符: 从根节点到某一节点,路径上经过的字符串连接起 ...

  10. 【TopCoder】SRM151 DIV2 练习总结

    第一次做完整的SRM题,刷完感觉萌萌哒,不过自己对java中很多细节不熟练,还要边做题边google. 250分的题:判断字符串序列是否是前缀码,如果不是,返回第一个违反前缀码规则的字符串. 简单的暴 ...