一、前言
在圣诞节以及元旦节日来临的日子里，如果能亲自为自己所爱的人画一个爱心树，这肯定是个很浪漫的事。那么如何用代码画出圣诞树呢？用我的办法就能很简单的实现，复制-粘贴-另存就可完成。
二、创意名
绚丽多彩的爱心树
三、效果展示
四、实现步骤
一:将html的代码复制
具体见后面的代码
二：打开UltraEdit记事本，将代码复制到记事本中
三、另存为love.html
四、用浏览器打开love.html
五、编码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>爱心树表白动画</title>
<style>
body {
margin: 0;
padding: 0;
background: #fafafa;
font-size: 14px;
font-family: "微软雅黑", "宋体", sans-serif;
color: #231f20;
overflow: auto;
}
a {
color: #000;
font-size: 14px;
}
#main {
width: 100%;
}
#wrap {
position: relative;
margin: 0 auto;
width: 1100px;
height: 680px;
margin-top: 10px;
}
#text {
width: 400px;
height: 425px;
left: 60px;
top: 80px;
position: absolute;
}
#code {
display: none;
font-size: 16px;
}
#clock-box {
position: absolute;
left: 60px;
top: 550px;
font-size: 28px;
display: none;
}
#clock-box a {
font-size: 28px;
text-decoration: none;
}
#clock {
margin-left: 48px;
}
#clock .digit {
font-size: 64px;
}
#canvas {
margin: 0 auto;
width: 1100px;
height: 680px;
}
#error {
margin: 0 auto;
text-align: center;
margin-top: 60px;
display: none;
}
.hand {
cursor: pointer;
}
.say {
margin-left: 5px;
}
.space {
margin-right: 150px;
}
</style>
</head>
<body>
<div id="main">
<div id="error">
抱歉！目前您的浏览器无法显示，请更新至最新版本或使用其他主流浏览器，谢谢合作。
</div>
<div id="wrap">
<canvas id="canvas" width="1100" height="680"></canvas>
</div>
</div>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jquery.min.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex.min.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex-parser.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex-jit.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex-builderbase.min.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex-async.min.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/jscex-async-powerpack.min.js"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/functions.js"
charset="utf-8"
></script>
<script
type="text/javascript"
src="https://cdn-static-devbit.cs.net/devbit-static/code/love-tree/js/love.js"
charset="utf-8"
></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);
canvas
.parent()
.css("background", "url(" + tree.toDataURL("image/png") + ")");
canvas.css("background", "#fafafa");
$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());
$await(jumpAnimate());
})
);
runAsync().start();
})();
</script>
</body>
</html>
提醒：在发布作品前请把不用的内容删掉
标签：devbit,canvas,tree,js,爱心,html,static,圣诞,var From： https://blog.51cto.com/u_15942605/6025734