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>