<!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>
浙公网安备 33010602011771号