爱心树代码实现爱心表白树源码免费html+js+css
html代码
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<title>爱心树</title>
-
<link type="text/css" rel="stylesheet" href="https://blog.csdn.net/webl2580/article/details/renxi/default.css">
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jquery.min.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex.min.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex-parser.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex-jit.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex-builderbase.min.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex-async.min.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/jscex-async-powerpack.min.js"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/functions.js" charset="utf-8"></script>
-
<script type="text/javascript" src="https://blog.csdn.net/webl2580/article/details/renxi/love.js" charset="utf-8"></script>
-
<style type="text/css">
-
<!--
-
.STYLE1 {
-
color: #666666
-
}
-
-->
-
</style>
-
</head>
-
<body>
-
<audio autoplay="autopaly">
-
<source src="https://blog.csdn.net/webl2580/article/details/renxi.mp3" type="audio/mp3" />
-
</audio>
-
<div id="main">
-
<div id="error">(<a href="http://www.谷歌.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器,或者其他游览器的最新版本。</div>
-
<div id="wrap">
-
<div id="text">
-
<div id="code"> <font color="#FF0000"> <span class="say"></span><br>
-
<span class="say"> </span><br>
-
<span class="say"> 我知道我不会甜言蜜语,但是我会用行动证明一切</span><br>
-
<span class="say"> </span><br>
-
<span class="say"></span><br>
-
<span class="say"></span><br>
-
<span class="say"></span><br>
-
<span class="say">来</span><br>
-
<span class="say"> </span><br>
-
<span class="say"><span class="space"></span></span> </font>
-
</p>
-
</div>
-
</div>
-
<div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00"></font> <span class="STYLE1">已经是……</span>
-
<div id="clock"></div>
-
</div>
-
<canvas id="canvas" width="1100" height="680"></canvas>
-
</div>
-
</div>
-
<script>
-
</script>
-
<script>
-
(function(){
-
var canvas = $('#canvas');
-
-
if (!canvas[0].getContext) {
-
$("#error").show();
-
return false; }
-
-
var width = canvas.width();
-
var height = canvas.height();
-
canvas.attr("width", width);
-
canvas.attr("height", height);
-
var opts = {
-
seed: {
-
x: width / 2 - 20,
-
color: "rgb(190, 26, 37)",
-
scale: 2
-
},
-
branch: [
-
[535, 680, 570, 250, 500, 200, 30, 100, [
-
[540, 500, 455, 417, 340, 400, 13, 100, [
-
[450, 435, 434, 430, 394, 395, 2, 40]
-
]],
-
[550, 445, 600, 356, 680, 345, 12, 100, [
-
[578, 400, 648, 409, 661, 426, 3, 80]
-
]],
-
[539, 281, 537, 248, 534, 217, 3, 40],
-
[546, 397, 413, 247, 328, 244, 9, 80, [
-
[427, 286, 383, 253, 371, 205, 2, 40],
-
[498, 345, 435, 315, 395, 330, 4, 60]
-
]],
-
[546, 357, 608, 252, 678, 221, 6, 100, [
-
[590, 293, 646, 277, 648, 271, 2, 80]
-
]]
-
]]
-
],
-
bloom: {
-
num: 700,
-
width: 1080,
-
height: 650,
-
},
-
footer: {
-
width: 1200,
-
height: 5,
-
speed: 10,
-
}
-
}
-
-
var tree = new Tree(canvas[0], width, height, opts);
-
var seed = tree.seed;
-
var foot = tree.footer;
-
var hold = 1;
-
-
canvas.click(function(e) {
-
var offset = canvas.offset(), x, y;
-
x = e.pageX - offset.left;
-
y = e.pageY - offset.top;
-
if (seed.hover(x, y)) {
-
hold = 0;
-
canvas.unbind("click");
-
canvas.unbind("mousemove");
-
canvas.removeClass('hand');
-
}
-
}).mousemove(function(e){
-
var offset = canvas.offset(), x, y;
-
x = e.pageX - offset.left;
-
y = e.pageY - offset.top;
-
canvas.toggleClass('hand', seed.hover(x, y));
-
});
-
-
var seedAnimate = eval(Jscex.compile("async", function () {
-
seed.draw();
-
while (hold) {
-
$await(Jscex.Async.sleep(10));
-
}
-
while (seed.canScale()) {
-
seed.scale(0.95);
-
$await(Jscex.Async.sleep(10));
-
}
-
while (seed.canMove()) {
-
seed.move(0, 2);
-
foot.draw();
-
$await(Jscex.Async.sleep(10));
-
}
-
}));
-
-
var growAnimate = eval(Jscex.compile("async", function () {
-
do {
-
tree.grow();
-
$await(Jscex.Async.sleep(10));
-
} while (tree.canGrow());
-
}));
-
-
var flowAnimate = eval(Jscex.compile("async", function () {
-
do {
-
tree.flower(2);
-
$await(Jscex.Async.sleep(10));
-
} while (tree.canFlower());
-
}));
-
-
var moveAnimate = eval(Jscex.compile("async", function () {
-
tree.snapshot("p1", 240, 0, 610, 680);
-
while (tree.move("p1", 500, 0)) {
-
foot.draw();
-
$await(Jscex.Async.sleep(10));
-
}
-
foot.draw();
-
tree.snapshot("p2", 500, 0, 610, 680);
-
-
// 会有闪烁不得意这样做, (>﹏<)
-
canvas.parent().css("background", "url(" tree.toDataURL('image/png') ")");
-
canvas.css("background", "#ffe");
-
$await(Jscex.Async.sleep(300));
-
canvas.css("background", "none");
-
}));
-
-
var jumpAnimate = eval(Jscex.compile("async", function () {
-
var ctx = tree.ctx;
-
while (true) {
-
tree.ctx.clearRect(0, 0, width, height);
-
tree.jump();
-
foot.draw();
-
$await(Jscex.Async.sleep(25));
-
}
-
}));
-
-
var textAnimate = eval(Jscex.compile("async", function () {
-
var together = new Date();
-
together.setFullYear(2010,1 , 15); //时间年月日
-
together.setHours(16); //小时
-
together.setMinutes(53); //分钟
-
together.setSeconds(0); //秒前一位
-
together.setMilliseconds(2); //秒第二位
-
-
$("#code").show().typewriter();
-
$("#clock-box").fadeIn(500);
-
while (true) {
-
timeElapse(together);
-
$await(Jscex.Async.sleep(1000));
-
}
-
}));
-
-
var runAsync = eval(Jscex.compile("async", function () {
-
$await(seedAnimate());
-
$await(growAnimate());
-
$await(flowAnimate());
-
$await(moveAnimate());
-
-
textAnimate().start();
-
-
$await(jumpAnimate());
-
}));
-
-
runAsync().start();
-
})();
-
</script>
-
-
-
</body>
-
</html>
js代码部分
-
-
function random(min, max) {
-
return min Math.floor(Math.random() * (max - min 1));
-
}
-
-
function bezier(cp, t) {
-
var p1 = cp[0].mul((1 - t) * (1 - t));
-
var p2 = cp[1].mul(2 * t * (1 - t));
-
var p3 = cp[2].mul(t * t);
-
return p1.add(p2).add(p3);
-
}
-
-
function inheart(x, y, r) {
-
// x^2 (y-(x^2)^(1/3))^2 = 1
-
// http://www.wolframalpha.com/input/?i=x^2+(y-(x^2)^(1/3))^2 = 1
-
var z = ((x / r) * (x / r) (y / r) * (y / r) - 1) * ((x / r) * (x / r) (y / r) * (y / r) - 1) * ((x / r) * (x / r) (y / r) * (y / r) - 1) - (x / r) * (x / r) * (y / r) * (y / r) * (y / r);
-
return z < 0;
-
}
-
-
Point = function(x, y) {
-
this.x = x || 0;
-
this.y = y || 0;
-
}
-
Point.prototype = {
-
clone: function() {
-
return new Point(this.x, this.y);
-
},
-
add: function(o) {
-
p = this.clone();
-
p.x = o.x;
-
p.y = o.y;
-
return p;
-
},
-
sub: function(o) {
-
p = this.clone();
-
p.x -= o.x;
-
p.y -= o.y;
-
return p;
-
},
-
div: function(n) {
-
p = this.clone();
-
p.x /= n;
-
p.y /= n;
-
return p;
-
},
-
mul: function(n) {
-
p = this.clone();
-
p.x *= n;
-
p.y *= n;
-
return p;
-
}
-
}
-
-
Heart = function() {
-
// x = 16 sin^3 t
-
// y = 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t
-
// http://www.wolframalpha.com/input/?i=x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)
-
var points = [], x, y, t;
-
for (var i = 10; i < 30; i = 0.2) {
-
t = i / Math.PI;
-
x = 16 * Math.pow(Math.sin(t), 3);
-
y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
-
points.push(new Point(x, y));
-
}
-
this.points = points;
-
this.length = points.length;
-
}
-
Heart.prototype = {
-
get: function(i, scale) {
-
return this.points[i].mul(scale || 1);
-
}
-
}
-
-
Seed = function(tree, point, scale, color) {
-
this.tree = tree;
-
-
var scale = scale || 1
-
var color = color || '#FF0000';
-
-
this.heart = {
-
point : point,
-
scale : scale,
-
color : color,
-
figure : new Heart(),
-
}
-
-
this.cirle = {
-
point : point,
-
scale : scale,
-
color : color,
-
radius : 5,
-
}
-
}
-
Seed.prototype = {
-
draw: function() {
-
this.drawHeart();
-
this.drawText();
-
},
-
addPosition: function(x, y) {
-
this.cirle.point = this.cirle.point.add(new Point(x, y));
-
},
-
canMove: function() {
-
return this.cirle.point.y < (this.tree.height 20);
-
},
-
move: function(x, y) {
-
this.clear();
-
this.drawCirle();
-
this.addPosition(x, y);
-
},
-
canScale: function() {
-
return this.heart.scale > 0.2;
-
},
-
setHeartScale: function(scale) {
-
this.heart.scale *= scale;
-
},
-
scale: function(scale) {
-
this.clear();
-
this.drawCirle();
-
this.drawHeart();
-
this.setHeartScale(scale);
-
},
-
drawHeart: function() {
-
var ctx = this.tree.ctx, heart = this.heart;
-
var point = heart.point, color = heart.color,
-
scale = heart.scale;
-
ctx.save();
-
ctx.fillStyle = color;
-
ctx.translate(point.x, point.y);
-
ctx.beginPath();
-
ctx.moveTo(0, 0);
-
for (var i = 0; i < heart.figure.length; i ) {
-
var p = heart.figure.get(i, scale);
-
ctx.lineTo(p.x, -p.y);
-
}
-
ctx.closePath();
-
ctx.fill();
-
ctx.restore();
-
},
-
drawCirle: function() {
-
var ctx = this.tree.ctx, cirle = this.cirle;
-
var point = cirle.point, color = cirle.color,
-
scale = cirle.scale, radius = cirle.radius;
-
ctx.save();
-
ctx.fillStyle = color;
-
ctx.translate(point.x, point.y);
-
ctx.scale(scale, scale);
-
ctx.beginPath();
-
ctx.moveTo(0, 0);
-
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
-
ctx.closePath();
-
ctx.fill();
-
ctx.restore();
-
},
-
drawText: function() {
-
var ctx = this.tree.ctx, heart = this.heart;
-
var point = heart.point, color = heart.color,
-
scale = heart.scale;
-
ctx.save();
-
ctx.strokeStyle = color;
-
ctx.fillStyle = color;
-
ctx.translate(point.x, point.y);
-
ctx.scale(scale, scale);
-
ctx.moveTo(0, 0);
-
ctx.lineTo(15, 15);
-
ctx.lineTo(60, 15);
-
ctx.stroke();
-
-
ctx.moveTo(0, 0);
-
ctx.scale(0.75, 0.75);
-
ctx.font = "12px 微软雅黑,Verdana"; // 字号肿么没有用? (ˉ(∞)ˉ)
-
ctx.fillText("Come Baby", 23, 10);
-
ctx.restore();
-
},
-
clear: function() {
-
var ctx = this.tree.ctx, cirle = this.cirle;
-
var point = cirle.point, scale = cirle.scale, radius = 26;
-
var w = h = (radius * scale);
-
ctx.clearRect(point.x - w, point.y - h, 4 * w, 4 * h);
-
},
-
hover: function(x, y) {
-
var ctx = this.tree.ctx;
-
var pixel = ctx.getImageData(x, y, 1, 1);
-
return pixel.data[3] == 255
-
}
-
}
-
-
Footer = function(tree, width, height, speed) {
-
this.tree = tree;
-
this.point = new Point(tree.seed.heart.point.x, tree.height - height / 2);
-
this.width = width;
-
this.height = height;
-
this.speed = speed || 2;
-
this.length = 0;
-
}
-
Footer.prototype = {
-
draw: function() {
-
var ctx = this.tree.ctx, point = this.point;
-
var len = this.length / 2;
-
-
ctx.save();
-
ctx.strokeStyle = 'rgb(35, 31, 32)';
-
ctx.lineWidth = this.height;
-
ctx.lineCap = 'round';
-
ctx.lineJoin = 'round';
-
ctx.translate(point.x, point.y);
-
ctx.beginPath();
-
ctx.moveTo(0, 0);
-
ctx.lineTo(len, 0);
-
ctx.lineTo(-len, 0);
-
ctx.stroke();
-
ctx.restore();
-
-
if (this.length < this.width) {
-
this.length = this.speed;
-
}
-
}
-
}
-
-
Tree = function(canvas, width, height, opt) {
-
this.canvas = canvas;
-
this.ctx = canvas.getContext('2d');
-
this.width = width;
-
this.height = height;
-
this.opt = opt || {};
-
-
this.record = {};
-
-
this.initSeed();
-
this.initFooter();
-
this.initBranch();
-
this.initBloom();
-
}
-
Tree.prototype = {
-
initSeed: function() {
-
var seed = this.opt.seed || {};
-
var x = seed.x || this.width / 2;
-
var y = seed.y || this.height / 2;
-
var point = new Point(x, y);
-
var color = seed.color || '#FF0000';
-
var scale = seed.scale || 1;
-
-
this.seed = new Seed(this, point, scale, color);
-
},
-
-
initFooter: function() {
-
var footer = this.opt.footer || {};
-
var width = footer.width || this.width;
-
var height = footer.height || 5;
-
var speed = footer.speed || 2;
-
this.footer = new Footer(this, width, height, speed);
-
},
-
-
initBranch: function() {
-
var branchs = this.opt.branch || []
-
this.branchs = [];
css代码部分
-
-
-->
-
</style>
-
</head>
-
<body>
-
<audio autoplay="autopaly">
-
<source src="https://blog.csdn.net/webl2580/article/details/renxi.mp3" type="audio/mp3" />
-
</audio>
-
<div id="main">
-
<div id="error">(<a href="http://www.谷歌.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器,或者其他游览器的最新版本。</div>
-
<div id="wrap">
-
<div id="text">
-
<div id="code"> <font color="#FF0000"> <span class="say"></span><br>
-
<span class="say"> </span><br>
-
<span class="say"> 我知道我不会甜言蜜语,但是我会用行动证明一切</span><br>
-
<span class="say"> </span><br>
-
<span class="say"></span><br>
-
<span class="say"></span><br>
-
<span class="say"></span><br>
-
<span class="say">来</span><br>
-
<span class="say"> </span><br>
-
<span class="say"><span class="space"></span></span> </font>
-
</p>
-
</div>
-
</div>
-
<div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00"></font> <span class="STYLE1">已经是……</span>
-
<div id="clock"></div>
-
</div>
-
<canvas id="canvas" width="1100" height="680"></canvas>
-
</div>
-
</div>
-
<script>
-
</script>
-
<script>
-
(function(){
-
var canvas = $('#canvas');
-
-
if (!canvas[0].getContext) {
-
$("#error").show();
-
return false; }
-
-
var width = canvas.width();
-
var height = canvas.height();
-
canvas.attr("width", width);
-
canvas.attr("height", height);
-
var opts = {
-
seed: {
-
x: width / 2 - 20,
-
color: "rgb(190, 26, 37)",
-
scale: 2
-
},
-
branch: [
-
[535, 680, 570, 250, 500, 200, 30, 100, [
-
[540, 500, 455, 417, 340, 400, 13, 100, [
-
[450, 435, 434, 430, 394, 395, 2, 40]
-
]],
-
[550, 445, 600, 356, 680, 345, 12, 100, [
-
[578, 400, 648, 409, 661, 426, 3, 80]
-
]],
-
[539, 281, 537, 248, 534, 217, 3, 40],
-
[546, 397, 413, 247, 328, 244, 9, 80, [
-
[427, 286, 383, 253, 371, 205, 2, 40],
-
[498, 345, 435, 315, 395, 330, 4, 60]
-
]],
-
[546, 357, 608, 252, 678, 221, 6, 100, [
-
[590, 293, 646, 277, 648, 271, 2, 80]
-
]]
-
]]
-
],
-
bloom: {
-
num: 700,
-
width: 1080,
-
height: 650,
-
},
-
footer: {
-
width: 1200,
-
height: 5,
-
speed: 10,
-
}
-
}
-
-
var tree = new Tree(canvas[0], width, height, opts);
-
var seed = tree.seed;
-
var foot = tree.footer;
-
var hold = 1;
-
-
canvas.click(function(e) {
-
var offset = canvas.offset(), x, y;
-
x = e.pageX - offset.left;
-
y = e.pageY - offset.top;
-
if (seed.hover(x, y)) {
-
hold = 0;
-
canvas.unbind("click");
-
canvas.unbind("mousemove");
-
canvas.removeClass('hand');
-
}
-
}).mousemove(function(e){
-
var offset = canvas.offset(), x, y;
-
x = e.pageX - offset.left;
-
y = e.pageY - offset.top;
-
canvas.toggleClass('hand', seed.hover(x, y));
-
});
-
-
var seedAnimate = eval(Jscex.compile("async", function () {
-
seed.draw();
-
while (hold) {
-
$await(Jscex.Async.sleep(10));
-
}
-
while (seed.canScale()) {
-
seed.scale(0.95);
-
$await(Jscex.Async.sleep(10));
-
}
-
while (seed.canMove()) {
-
seed.move(0, 2);
-
foot.draw();
-
$await(Jscex.Async.sleep(10));
-
}
-
}));
-
-
var growAnimate = eval(Jscex.compile("async", function () {
-
do {
-
tree.grow();
-
$await(Jscex.Async.sleep(10));
-
} while (tree.canGrow());
-
}));
-
-
var flowAnimate = eval(Jscex.compile("async", function () {
-
do {
-
tree.flower(2);
-
$await(Jscex.Async.sleep(10));
-
} while (tree.canFlower());
-
}));
-
-
var moveAnimate = eval(Jscex.compile("async", function () {
-
tree.snapshot("p1", 240, 0, 610, 680);
-
while (tree.move("p1", 500, 0)) {
-
foot.draw();
-
$await(Jscex.Async.sleep(10));
-
}
-
foot.draw();
-
tree.snapshot("p2", 500, 0, 610, 680);
-
-
// 会有闪烁不得意这样做, (>﹏<)
-
canvas.parent().css("background", "url(" tree.toDataURL('image/png') ")");
-
canvas.css("background", "#ffe");
-
$await(Jscex.Async.sleep(300));
-
canvas.css("background", "none");
-
}));
-
-
var jumpAnimate = eval(Jscex.compile("async", function () {
-
var ctx = tree.ctx;
-
while (true) {
-
tree.ctx.clearRect(0, 0, width, height);
-
tree.jump();
-
foot.draw();
-
$await(Jscex.Async.sleep(25));
-
}
-
}));
-
-
var textAnimate = eval(Jscex.compile("async", function () {
-
var together = new Date();
-
together.setFullYear(2010,1 , 15); //时间年月日
-
together.setHours(16); //小时
-
together.setMinutes(53); //分钟
-
together.setSeconds(0); //秒前一位
-
together.setMilliseconds(2); //秒第二位
-
-
$("#code").show().typewriter();
-
$("#clock-box").fadeIn(500);
-
while (true) {
-
timeElapse(together);
-
$await(Jscex.Async.sleep(1000));
-
}
-
}));//全部代码在企鹅裙311075050
-
-
var runAsync = eval(Jscex.compile("async", function () {
-
$await(seedAnimate());
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfafif
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01