表白代码——爱情树

最新推荐文章于 2024-06-06 15:07:55 发布
最新推荐文章于 2024-06-06 15:07:55 发布
阅读量460 收藏 11
点赞数 8
文章标签： html5 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59736951/article/details/134996484
版权

index.html

<!DOCTYPE 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 
content="IE=11.0000" http-equiv="X-UA-Compatible">
<meta name="keywords" content="" />
<meta name="description" content="5" />
<body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
		 <TITLE>爱情树  </TITLE>	             <LINK href="shuju/default.css" 
rel="stylesheet" type="text/css">		 
<SCRIPT src="shuju/jquery.min.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex.min.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex-parser.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex-jit.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex-builderbase.min.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex-async.min.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/jscex-async-powerpack.min.js" type="text/javascript"></SCRIPT>
		 
<SCRIPT src="shuju/functions.js" type="text/javascript" charset="utf-8"></SCRIPT>
		 
<SCRIPT src="shuju/love.js" type="text/javascript" charset="utf-8"></SCRIPT>
	     
<STYLE type="text/css">
<!--
.STYLE1 {color: #666666}
-->
        
-->
        </STYLE>   
<DIV id="main">
<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><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></P></DIV></DIV>
<DIV id="clock-box">我们已经在一起...</SPAN>                
   
<DIV id="clock"></DIV></DIV><CANVAS width="1100" height="680" 
id="canvas"></CANVAS>             </DIV></DIV>
<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(2013,07 ,22); 			//时间年月日
		    together.setHours(07);						//小时	
		    together.setMinutes(03);					//分钟
		    together.setSeconds(0);					//秒前一位
		    together.setMilliseconds(55);				//秒第二位

		    $("#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>     				     </div>
				</div>
			</div>
</div>
	<div class="bg1">	
		<div class="main">
			<footer style="line-height:20px">
                <div id="copyright">
                    <div align="center"> <a href='' target="_blank"></a> 
                    <a href="" target="_blank"></a>
                    <a href="" target="_blank"></a>
                    </div>
                  </object>
                </div>
		</div>
	</div>
</div>
<audio id="bgmMusic" src="http://qzone.haoduoge.com/music/C2C3F0LSXH4D771253124A26CF9C71C939B2A.mp3" preload="auto" type="audio/mp3" autoplay loop></audio>


</body>
</html>

default.css

body {
	background: rgb(255, 255, 238); margin: 0px; padding: 0px; color: rgb(35, 31, 32); overflow: auto; font-family: "微软雅黑","宋体",sans-serif; font-size: 14px;
}
a {
	color: rgb(0, 0, 0); font-size: 14px;
}
#main {
	width: 100%;
}
#wrap {
	margin: 10px auto 0px; width: 1100px; height: 680px; position: relative;
}
#text {
	left: 60px; top: 80px; width: 400px; height: 425px; position: absolute;
}
#code {
	font-size: 16px; display: none;
}
#clock-box {
	left: 60px; top: 550px; font-size: 28px; display: none; position: absolute;
}
#clock-box a {
	font-size: 28px; text-decoration: none;
}
#clock {
	margin-left: 48px;
}
#clock .digit {
	font-size: 64px;
}
#canvas {
	margin: 0px auto; width: 1100px; height: 680px;
}
#error {
	margin: 60px auto 0px; text-align: center; display: none;
}
.hand {
	cursor: pointer;
}
.say {
	margin-left: 5px;
}
.space {
	margin-right: 150px;
}

love.js

(function(window){

    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%5E2%2B%28y-%28x%5E2%29%5E%281%2F3%29%29%5E2+%3D+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+%3D+16+sin%5E3+t%2C+y+%3D+(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("←点击爱心", 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 = [];
            this.addBranchs(branchs);
        },

        initBloom: function() {
            var bloom = this.opt.bloom || {};
            var cache = [],
                num = bloom.num || 500, 
                width = bloom.width || this.width,
                height = bloom.height || this.height,
                figure = this.seed.heart.figure;
            var r = 240, x, y;
            for (var i = 0; i < num; i++) {
                cache.push(this.createBloom(width, height, r, figure));
            }
            this.blooms = [];
            this.bloomsCache = cache;
        },

        toDataURL: function(type) {
            return this.canvas.toDataURL(type);
        },

        draw: function(k) {
            var s = this, ctx = s.ctx;
            var rec = s.record[k];
            if (!rec) {
                return ;
            }
            var point = rec.point,
                image = rec.image;

            ctx.save();
            ctx.putImageData(image, point.x, point.y);
        	ctx.restore();
        },

        addBranch: function(branch) {
        	this.branchs.push(branch);
        },

        addBranchs: function(branchs){
            var s = this, b, p1, p2, p3, r, l, c;
        	for (var i = 0; i < branchs.length; i++) {
                b = branchs[i];
                p1 = new Point(b[0], b[1]);
                p2 = new Point(b[2], b[3]);
                p3 = new Point(b[4], b[5]);
                r = b[6];
                l = b[7];
                c = b[8]
                s.addBranch(new Branch(s, p1, p2, p3, r, l, c)); 
            }
        },

        removeBranch: function(branch) {
            var branchs = this.branchs;
        	for (var i = 0; i < branchs.length; i++) {
        		if (branchs[i] === branch) {
        			branchs.splice(i, 1);
                }
            }
        },

        canGrow: function() {
            return !!this.branchs.length;
        },
        grow: function() {
            var branchs = this.branchs;
    	    for (var i = 0; i < branchs.length; i++) {
                var branch = branchs[i];
                if (branch) {
                    branch.grow();
                }
            }
        },

        addBloom: function (bloom) {
            this.blooms.push(bloom);
        },

        removeBloom: function (bloom) {
            var blooms = this.blooms;
            for (var i = 0; i < blooms.length; i++) {
                if (blooms[i] === bloom) {
                    blooms.splice(i, 1);
                }
            }
        },

        createBloom: function(width, height, radius, figure, color, alpha, angle, scale, place, speed) {
            var x, y;
            while (true) {
                x = random(20, width - 20);
                y = random(20, height - 20);
                if (inheart(x - width / 2, height - (height - 40) / 2 - y, radius)) {
                    return new Bloom(this, new Point(x, y), figure, color, alpha, angle, scale, place, speed);
                }
            }
        },
        
        canFlower: function() {
            return !!this.blooms.length;
        }, 
        flower: function(num) {
            var s = this, blooms = s.bloomsCache.splice(0, num);
            for (var i = 0; i < blooms.length; i++) {
                s.addBloom(blooms[i]);
            }
            blooms = s.blooms;
            for (var j = 0; j < blooms.length; j++) {
                blooms[j].flower();
            }
        },

        snapshot: function(k, x, y, width, height) {
            var ctx = this.ctx;
            var image = ctx.getImageData(x, y, width, height); 
            this.record[k] = {
                image: image,
                point: new Point(x, y),
                width: width,
                height: height
            }
        },
        setSpeed: function(k, speed) {
            this.record[k || "move"].speed = speed;
        },
        move: function(k, x, y) {
            var s = this, ctx = s.ctx;
            var rec = s.record[k || "move"];
            var point = rec.point,
                image = rec.image,
                speed = rec.speed || 10,
                width = rec.width,
                height = rec.height; 

            i = point.x + speed < x ? point.x + speed : x;
            j = point.y + speed < y ? point.y + speed : y; 

            ctx.save();
            ctx.clearRect(point.x, point.y, width, height);
            ctx.putImageData(image, i, j);
        	ctx.restore();

            rec.point = new Point(i, j);
            rec.speed = speed * 0.95;

            if (rec.speed < 2) {
                rec.speed = 2;
            }
            return i < x || j < y;
        },

        jump: function() {
            var s = this, blooms = s.blooms;
            if (blooms.length) {
                for (var i = 0; i < blooms.length; i++) {
                    blooms[i].jump();
                }
            } 
            if ((blooms.length && blooms.length < 3) || !blooms.length) {
                var bloom = this.opt.bloom || {},
                    width = bloom.width || this.width,
                    height = bloom.height || this.height,
                    figure = this.seed.heart.figure;
                var r = 240, x, y;
                for (var i = 0; i < random(1,2); i++) {
                    blooms.push(this.createBloom(width / 2 + width, height, r, figure, null, 1, null, 1, new Point(random(-100,600), 720), random(200,300)));
                }
            }
        }
    }

    Branch = function(tree, point1, point2, point3, radius, length, branchs) {
        this.tree = tree;
        this.point1 = point1;
        this.point2 = point2;
        this.point3 = point3;
        this.radius = radius;
        this.length = length || 100;    
        this.len = 0;
        this.t = 1 / (this.length - 1);   
        this.branchs = branchs || [];
    }

    Branch.prototype = {
        grow: function() {
            var s = this, p; 
            if (s.len <= s.length) {
                p = bezier([s.point1, s.point2, s.point3], s.len * s.t);
                s.draw(p);
                s.len += 1;
                s.radius *= 0.97;
            } else {
                s.tree.removeBranch(s);
                s.tree.addBranchs(s.branchs);
            }
        },
        draw: function(p) {
            var s = this;
            var ctx = s.tree.ctx;
            ctx.save();
        	ctx.beginPath();
        	ctx.fillStyle = 'rgb(35, 31, 32)';
            ctx.shadowColor = 'rgb(35, 31, 32)';
            ctx.shadowBlur = 2;
        	ctx.moveTo(p.x, p.y);
        	ctx.arc(p.x, p.y, s.radius, 0, 2 * Math.PI);
        	ctx.closePath();
        	ctx.fill();
        	ctx.restore();
        }
    }

    Bloom = function(tree, point, figure, color, alpha, angle, scale, place, speed) {
        this.tree = tree;
        this.point = point;
        this.color = color || 'rgb(255,' + random(0, 255) + ',' + random(0, 255) + ')';
        this.alpha = alpha || random(0.3, 1);
        this.angle = angle || random(0, 360);
        this.scale = scale || 0.1;
        this.place = place;
        this.speed = speed;

        this.figure = figure;
    }
    Bloom.prototype = {
        setFigure: function(figure) {
            this.figure = figure;
        },
        flower: function() {
            var s = this;
            s.draw();
            s.scale += 0.1;
            if (s.scale > 1) {
                s.tree.removeBloom(s);
            }
        },
        draw: function() {
            var s = this, ctx = s.tree.ctx, figure = s.figure;

            ctx.save();
            ctx.fillStyle = s.color;
            ctx.globalAlpha = s.alpha;
            ctx.translate(s.point.x, s.point.y);
            ctx.scale(s.scale, s.scale);
            ctx.rotate(s.angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            for (var i = 0; i < figure.length; i++) {
                var p = figure.get(i);
                ctx.lineTo(p.x, -p.y);
            }
            ctx.closePath();
            ctx.fill();
            ctx.restore();
        },
        jump: function() {
            var s = this, height = s.tree.height;

            if (s.point.x < -20 || s.point.y > height + 20) {
                s.tree.removeBloom(s);
            } else {
                s.draw();
                s.point = s.place.sub(s.point).div(s.speed).add(s.point);
                s.angle += 0.05;
                s.speed -= 1;
            }
        }
    }

    window.random = random;
    window.bezier = bezier;
    window.Point = Point;
    window.Tree = Tree;

})(window);

完整代码：链接：https://pan.baidu.com/s/14pIgwXwlS3Dm9zysTmGJYA?pwd=51x4 
提取码：51x4

占据我鑫
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
爱情树代码python_love: 一缕青丝一缕魂，锦绳系命送爱人。
weixin_33661931的博客
02-12 2485
爱情树这是一棵网上流传了很久的爱情树。2020.03.10，我搭建了属于自己的爱情树，修补了大量不规范的代码，加了自动循环播放背景音乐。爱情树地址：示例图：应小伙伴们的需求，整理了下源码，提供给大家。啊啊啊，我也不知道为什么最近好多人都知道了它。纪念一下彼此的小确幸还是蛮不错的，拿去告白就算了。修改说明入口文件为index.html，大家需要自定义的地方，我全部给了注释说明。具体的修改如下：1.修...
html5唯美爱情表白动画网页代码
03-27
html5唯美爱情表白动画网页代码
浪漫爱情树表白代码
05-21
本程序可修改性较强，可在代码里面进行内容修改，如有疑问，可私信
爱情树表白小程序
01-13
宅男必备的表白技术，让宅男也懂浪漫，适合新手卸载研究
爱情树告白网站源码
02-16
爱情树告白网站源码
爱情树情人节浪漫表白
05-21
此代码支持修改，本页面充满浪漫，是表白的不二之选。
爱情树版-表白源代码html动态图
04-01
爱情树版-表白源代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aiqingshu/
爱情树源码表白动画html
05-15
爱情树源码表白动画html
520，七夕节，爱情表白代码
05-19
明天就是5月20号了，很多人都准备向心怡的女孩子表白了，但是没有好的想法，送你一段代码，助你一臂之力！
爱情树的表白网页 html5+css+js
05-19
爱情树的表白网页 可自行修改和编辑
爱心树表白动画源码.zip
10-30
看看可还行！真用这个low了点奥！
html网页表白树源码
04-15
非常绚丽的前端页面表白
程序员向妹子表白专用代码
03-17
程序员欧巴们，祝你们早日找到自己的soulmate（灵魂伴侣）`(*∩_∩*)′
520七夕表白,还不懂浪漫？4套代码教会你如何深情表白【建议收藏】❤️
收破烂的小熊猫
08-15 3345
马上又到了脱单的黄金时刻❤️七夕啦❤️!如果你有喜欢的女孩子，一定要趁着这个时候把喜欢说出口！！！但是该不会还有人表白在学校的操场上摆着爱心蜡烛抱一束花喊一堆人来围观吧！！！！No！！！！请你立刻马上放弃这个计划！！！毫无心意不说，对于女孩子来说是真的很社死啊！
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
热门推荐
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
HTML5七夕情人节表白网页(爱情树 Html5实现唯美表白动画代码) HTML+CSS+JavaScript
B85951005的博客
08-04 4965
七夕情人节表白网页爱情树
html+css+javascript实现520告白爱情树(含音乐)程序员表白必备
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-17 6162
❉ html+css+javascript实现浪漫爱情树 (含音乐)程序员表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 引用了CSS3的动画效果来显示，视觉效果相当不错！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧！~~ ❉ 文章目录 ❉ html+css+javascript实现浪漫爱情树 (含音乐)程序员表白必备1. PC(电脑端)演示一、(代码实现) 二、做好的网页效果,如何通过发链接给别人看?1.1 解决部署上线~&gt
爱心树代码实现爱心表白树源码（免费分享）html+js+css
webl2580的博客
01-11 9789
爱心代码
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
最新发布
艾恩小灰灰的博客
06-06 807
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
爱情树 html5实现唯美表白动画代码
07-17
爱情树是一个基于HTML5技术实现的唯美表白动画代码。它采用了HTML5 Canvas元素和JavaScript代码实现了一个虚拟的“爱情树”效果。 实现这个效果的关键是使用Canvas元素绘制树的结构和动画效果。通过给定树的起始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值