canvas单击生成花 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="utf-8">
　　　　　　　<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>

  5     </head>
  6     
  7     <body>
  8         <canvas id="canvas" width="1900" height="800"></canvas>
  9         
 10         <script>
 11             var canvas = document.getElementById("canvas");
 12             var canvasWidth = canvas.width;
 13             var canvasHeight = canvas.height;
 14             var context = canvas.getContext("2d");
 15 
 16             /**
 17              * 单击canvas生成随机大小、颜色、透明度的花
 18              */
 19             function drawCurve() {
 20                 canvas.addEventListener("click", function(event){
 21                     $("#canvas").queue(function(next){
 22                         var r = parseInt(Math.random() * 50 + 50);
 23                         var flower = new Flower(event.offsetX, event.offsetY, r);
 24                         flower.draw(context);
 25                         $(this).dequeue();
 26                     }).delay(50).queue(function(next){
 27                         var r = parseInt(Math.random() * 50 + 50);
 28                         var flower = new Flower(event.offsetX, event.offsetY, r);
 29                         flower.draw(context);
 30                         $(this).dequeue();
 31                     }).delay(50).queue(function(next){
 32                         var r = parseInt(Math.random() * 50 + 50);
 33                         var flower = new Flower(event.offsetX, event.offsetY, r);
 34                         flower.draw(context);
 35                         $(this).dequeue();
 36                     });
 37                 }, false);
 38             }
 39             /**
 40              * 根据六边形生成花瓣
 41              * 以六边形的每个点作为三阶贝塞尔曲线的控制点的基础点
 42              * @param {Number} x [六边形中点x坐标]
 43              * @param {Number} y [六边形中点y坐标]
 44              * @param {Number} r [六边形边长]
 45              */
 46             function Flower(x, y ,r) {
 47                 this.x = x;
 48                 this.y = y;
 49                 this.r = r;
 50                 this.point = [
 51                     {
 52                         x: -r,
 53                         y: 0
 54                     },
 55                     {
 56                         x: -r / 2,
 57                         y: Math.cos(Math.PI / 6) * r
 58                     },
 59                     {
 60                         x: r / 2,
 61                         y: Math.cos(Math.PI / 6) * r
 62                     },
 63                     {
 64                         x: r,
 65                         y: 0
 66                     },
 67                     {   
 68                         x: r / 2,
 69                         y: Math.cos(Math.PI / 6) * r * -1
 70                     },
 71                     {
 72                         x: -r / 2,
 73                         y: Math.cos(Math.PI / 6) * r * -1
 74                     }
 75                 ]
 76             }
 77             /**
 78              * 绘制一朵花的六瓣花瓣
 79              * @param  {Object} ctx [canvas上下文]
 80              */
 81             Flower.prototype.draw = function(ctx) {
 82                 var x = this.x;
 83                 var y = this.y;
 84                 var points = this.point;
 85                 for(var i = 0; i < 6; i++) {
 86                     if(i == 5){
 87                         drawFlower(x, y, points[i], points[0], ctx);
 88                     } else {
 89                         drawFlower(x, y, points[i], points[i+1], ctx);
 90                     }
 91                 }
 92             }
 93             /**
 94              * canvas中绘制花
 95              * @param  {Number} x      [鼠标单击点的x坐标]
 96              * @param  {Number} y      [鼠标单击点的y坐标]
 97              * @param  {JSONObject} pointA [贝塞尔曲线控制点A]
 98              * @param  {JSONObject} pointB [贝塞尔曲线控制点B]
 99              * @param  {Object} ctx    [canvas上下文]
100              */
101             function drawFlower(x, y, pointA, pointB, ctx){
102                 var flowerOffsetX = (Math.random() + 1) * 0.5;
103                 var flowerOffsetY = (Math.random() + 1) * 0.5;
104                 var r = parseInt(Math.random() * 255);
105                 var g = parseInt(Math.random() * 255);
106                 var b = parseInt(Math.random() * 255);
107                 var a = Math.random() * 0.7 + 0.3;
108                 var colorArr = [r,g,b,a];
109                 var color = colorArr.join(",");
110                 ctx.save();
111                 ctx.translate(x, y);
112                 ctx.beginPath();
113                 ctx.moveTo(0, 0);
114                 ctx.bezierCurveTo(pointA.x * flowerOffsetX, pointA.y * flowerOffsetY, pointB.x * flowerOffsetX, pointB.y * flowerOffsetY, 0, 0);
115                 ctx.strokeStyle = "rgba(" + color + ")";
116                 ctx.stroke();
117                 ctx.restore();
118             }
119             /**
120              * 绘制六边形
121              */
122             function drawHexagon(event) {
123                 var x = event.offsetX;
124                 var y = event.offsetY;
125                 var r = parseInt(Math.random() * 25 + 5);
126                 var tempR = Math.cos(Math.PI / 6) * r;
127                 context.save();
128                 context.translate(x, y);
129                 context.beginPath();
130                 context.moveTo(-r, 0);
131                 context.lineTo(-(r / 2), tempR);
132                 context.lineTo((r / 2), tempR);
133                 context.lineTo(r, 0);
134                 context.lineTo(r / 2, -tempR);
135                 context.lineTo(-(r / 2), -tempR);
136                 context.lineTo(-r, 0);
137                 context.strokeStyle = "red";
138                 context.stroke();
139                 context.restore();
140             }
141             window.onload = drawCurve;
142         </script>
143     </body>
144 </html>

 

posted @ 2016-05-12 14:21  surprise7  阅读(239)  评论(0)    收藏  举报