<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style> #canvas{ background: #000; } </style> <body> <canvas id="canvas" width="1920" height="1080"></canvas> <script src="jquery/jquery.js"></script> <script> var canvas = document.getElementById("canvas"); var canvasWidth = canvas.width; var canvasHeight = canvas.height; var context = canvas.getContext("2d"); var flowers = []; var flowersLength = 50; var speed = 0; /** * 单击canvas生成随机大小、颜色、透明度的花 */ function drawCurve() { drawFlowers(); canvas.addEventListener("mousemove", function(event){ // drawHexagon(event); $("#canvas").queue(function(next){ var r = parseInt(Math.random() * 50 + 50); var angle = Math.random() * Math.PI * 2; var speed = Math.random() * 0.04 + 0.01; var dropSpeed = Math.random() * 4 + 1; var flower = new Flower(event.offsetX, event.offsetY, r, angle, speed, dropSpeed); // flower.draw(context); flowers.push(flower); if(flowers.length >= flowersLength) { flowers.shift(); } $(this).dequeue(); }); }, false); } /** * 根据六边形生成花瓣 * 以六边形的每个点作为三阶贝塞尔曲线的控制点的基础点 * @param {Number} x [六边形中点x坐标] * @param {Number} y [六边形中点y坐标] * @param {Number} r [六边形边长] */ function Flower(x, y , r, angle, speed, dropSpeed) { this.x = x; this.y = y; this.r = r; this.angle = angle; this.speed = speed; this.dropSpeed = dropSpeed; this.point = [ [ {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5} ], [ {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5} ], [ {x: r * Math.sin(this.angle + Math.PI / 3 * 0), y: r * Math.cos(this.angle + Math.PI / 3 * 0), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 1), y: r * Math.cos(this.angle + Math.PI / 3 * 1), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 2), y: r * Math.cos(this.angle + Math.PI / 3 * 2), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 3), y: r * Math.cos(this.angle + Math.PI / 3 * 3), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 4), y: r * Math.cos(this.angle + Math.PI / 3 * 4), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5}, {x: r * Math.sin(this.angle + Math.PI / 3 * 5), y: r * Math.cos(this.angle + Math.PI / 3 * 5), offsetX: (Math.random() + 1) * 0.5, offsetY: (Math.random() + 1) * 0.5} ] ] } /** * 绘制一朵花的六瓣花瓣 * @param {Object} ctx [canvas上下文] */ Flower.prototype.draw = function(ctx) { var x = this.x; var y = this.y; var R = this.r; var points = this.point; for(var j = 0; j < 3; j++) { for(var i = 0; i < 6; i++) { points[j][i].x = R * Math.sin(this.angle + Math.PI / 3 * i); points[j][i].y = R * Math.cos(this.angle + Math.PI / 3 * i); if(i == 5){ drawFlower(x, y, R, points[j][i], points[j][0], ctx); } else { drawFlower(x, y, R, points[j][i], points[j][i+1], ctx); } } } } /** * canvas中绘制花 * @param {Number} x [鼠标单击点的x坐标] * @param {Number} y [鼠标单击点的y坐标] * @param {JSONObject} pointA [贝塞尔曲线控制点A] * @param {JSONObject} pointB [贝塞尔曲线控制点B] * @param {Object} ctx [canvas上下文] */ function drawFlower(x, y, R, pointA, pointB, ctx){ if(!pointA.color){ var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); var a = Math.random() * 0.7 + 0.3; var colorArr = [r,g,b,a]; var color = colorArr.join(","); pointA.color = color; } ctx.save(); ctx.translate(x, y); ctx.beginPath(); ctx.moveTo(0, 0); ctx.bezierCurveTo(pointA.x * pointA.offsetX, pointA.y * pointA.offsetY, pointB.x * pointB.offsetX, pointB.y * pointB.offsetY, 0, 0); ctx.strokeStyle = "rgba(" + pointA.color + ")"; ctx.stroke(); ctx.restore(); } /** * 绘制六边形 */ function drawHexagon(event) { var x = event.offsetX; var y = event.offsetY; var r = 60 || parseInt(Math.random() * 25 + 5); var angle = 0; var tempR = Math.cos(Math.PI / 6) * r; var a = r * Math.sin(angle); var b = r * Math.cos(angle); context.save(); context.translate(x, y); context.beginPath(); context.moveTo(r * Math.sin(angle), r * Math.cos(angle)); context.lineTo(r * Math.sin(angle + Math.PI/3*1), r * Math.cos(angle + Math.PI/3*1)); context.lineTo(r * Math.sin(angle + Math.PI/3*2), r * Math.cos(angle + Math.PI/3*2)); context.lineTo(r * Math.sin(angle + Math.PI/3*3), r * Math.cos(angle + Math.PI/3*3)); context.lineTo(r * Math.sin(angle + Math.PI/3*4), r * Math.cos(angle + Math.PI/3*4)); context.lineTo(r * Math.sin(angle + Math.PI/3*5), r * Math.cos(angle + Math.PI/3*5)); context.lineTo(r * Math.sin(angle), r * Math.cos(angle)); context.strokeStyle = "red"; context.stroke(); context.closePath(); /*context.beginPath(); context.arc(0, 0, r, 0, Math.PI * 2, false); context.strokeStyle = "darkgreen"; context.stroke(); context.closePath();*/ context.restore(); } function drawFlowers() { context.clearRect(0, 0, canvasWidth, canvasHeight); if(flowers && flowers.length) { for(var i = 0; i < flowers.length; i++) { flowers[i].draw(context); flowers[i].angle += flowers[i].speed; flowers[i].y += flowers[i].dropSpeed; } } window.requestAnimationFrame(drawFlowers); } window.onload = drawCurve; </script> </body> </html>