当前位置:首页 > Canvas绘制多小星星 demo

Canvas绘制多小星星 demo

发布于 2018-04-08 阅读 1000 次 Canvas Javascript HTML5

介绍:本文是一个用canvas随机绘制几个多角星的小demo,可以调整参数来改变绘制的个数和角数。
预览:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. div{padding:20px;}
  8. </style>
  9. </head>
  10. <body style="overflow:hidden;">
  11. <script>
  12. var starsAnim = {
  13. init:function(){
  14. canvas = document.createElement("canvas");
  15. ctx = canvas.getContext("2d");
  16. W = window.innerWidth;
  17. H = window.innerHeight;
  18. canvas.width = W;
  19. canvas.height = H;
  20. document.body.appendChild(canvas);
  21. var star = oneStar.init(8,ctx);
  22. }
  23. }
  24. /**
  25. * [oneStar 创建一个多角星]
  26. * @type {Object}
  27. */
  28. var oneStar = {
  29. init : function(nums,ctx,r,x,y,trangles){
  30. this.c = this.getRandColor(); //多角星颜色
  31. this.r = r ? r : 50; //多角星半径
  32. this.x = x ? x : this.r/2; //中心坐标
  33. this.y = y ? y : this.r/2; //中心坐标
  34. this.ctx = ctx;
  35. this.trangles = trangles ? trangles : 5; //角数。默认是五角星
  36. this.stars = []; //多角星数据
  37. this.drawStars(nums); //绘制多个多角星
  38. },
  39. /**
  40. * drawStar 绘制多角星
  41. * @param {Number} r 半径
  42. * @param {Number} x 中心坐标
  43. * @param {Number} y 中心坐标
  44. * @param {String} c 颜色
  45. */
  46. drawStar : function(r, x, y, c){
  47. ctx.save();
  48. ctx.translate(x,y); //设置一个随机偏移量,避免星星重叠在一起
  49. var star = [], item=null, angle = Math.PI/this.trangles;
  50. ctx.rotate(-Math.PI/2); //旋转使星星的开始点朝上
  51. for(var i = 0; i < this.trangles*2; i++){
  52. if(!(i&1)){//不是奇数的半径是r
  53. item = {
  54. x : r * Math.cos(angle*i),
  55. y : r * Math.sin(angle*i)
  56. }
  57. }else{//不是奇数的半径是r/2
  58. item = {
  59. x : 0.5 * r * Math.cos(angle*i),
  60. y : 0.5 * r * Math.sin(angle*i)
  61. }
  62. }
  63. star.push(item);
  64. }
  65. this.stars.push(star);
  66. ctx.beginPath();
  67. ctx.strokeStyle = c;
  68. ctx.lineWidth = 5;
  69. ctx.moveTo(star[0].x,star[0].y);
  70. for(var i = 1; i<star.length; i++){
  71. ctx.lineTo(star[i].x,star[i].y);
  72. }
  73. ctx.closePath();
  74. // 绘制吊绳
  75. ctx.moveTo(star[0].x,star[0].y);
  76. ctx.lineTo(star[0].x+x+y,star[0].y);
  77. ctx.stroke();
  78. ctx.restore();
  79. },
  80. /**
  81. * drawStars 绘制多角星
  82. * @param {Number} num 绘制数量
  83. */
  84. drawStars : function(num){
  85. for(var i = 0; i<num; i++){
  86. this.r = ~~(this.getcustomRand(25,60)); //~~表示取整
  87. this.x = this.r + this.x + this.getcustomRand(10,180);
  88. this.y = this.r + this.getcustomRand(80,200);
  89. this.c = this.getRandColor();
  90. this.drawStar(this.r, this.x, this.y, this.c);
  91. console.log(this.stars);
  92. this.stars[i].trans = {
  93. r : this.r,
  94. x : this.x,
  95. y: this.y,
  96. c :this.c
  97. };
  98. }
  99. },
  100. /**
  101. * getRandColor 获取一个随机颜色
  102. * @return {String} 返回一个rgb颜色字符串
  103. */
  104. getRandColor : function(){
  105. return "rgb("+(~~(Math.random()*255)) + "," + (~~(Math.random()*255)) +","+(~~(Math.random()*255))+")";
  106. },
  107. /**
  108. * getcustomRand 获取一个指定范围的随机~~数
  109. * @param {Number} max 范围右边界
  110. * @param {Number} min 范围左边界
  111. * @return {Number} 返回随机数
  112. */
  113. getcustomRand : function(max,min){
  114. return Math.random() * (max-min) + min;
  115. }
  116. }
  117. starsAnim.init();
  118. </script>
  119. </body>
  120. </html>