传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 梦缠绕的时候 黑马程序员官方团队   /  2019-1-13 11:50  /  99 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

为一个专业得程序员,咱们的表白怎能一个送花,几句情话了得,当然是要上代码啦!!!

<!DOCTYPE html>
<html>

        <head>
                <meta charset="UTF-8">
                <title>Draw Heart</title>
                <style type="text/css">
                        * {
                                margin: 0;
                                padding: 0;
                        }
                       
                        html {
                                height: 100%;
                                margin: 0;
                        }
                       
                        body {
                                height: 100%;
                                background-color: white;
                        }
                       
                        #canvasZone {
                                width: 100%;
                                height: 100%;
                                text-align: center;
                                background-color: black;
                        }
                       
                        #myCanvas {
                                height: 100%;
                                display: block;
                                /*background-color:aqua;*/
                        }
                       
                        .text {
                                width: 220px;
                                height: 520px;
                                display: block;
                                top: 70px;
                                right: 50px;
                                color: aqua;
                                background-color: black;
                                position: fixed;
                        }
                </style>
        </head>

        <body>
                <div id="text" class="text">

                </div>
                <div id="canvasZone">
                        <canvas id="myCanvas"></canvas>
                </div>
                <audio src="love.mp3" autoplay="autoplay">
                Your browser does not support the audio element.
                </audio>
        </body>
        <script type="text/javascript">
                var r = 3;
                var radian; //弧度  
                var i;
                var radianDecrement; //弧度增量  
                var time = 5; //每个点之间的时间间隔  
                var intervalId;
                var num = 360; //分割为 360 个点  
                var startRadian = Math.PI;
                var ctx;
                var startX = 100;
                var startY = 80;
                window.onload = function() {
                        startAnimation();
                        setTimeout(function() {
                                startX = 155;
                                startY = 70;
                                ctx.moveTo(startX, startY);
                               
                                drawHeart();
                                ctx.strokeStyle = "aqua"
                        }, 2500);
                        setTimeout(function() {
                                textLove();
                        }, 6000);
                        setTimeout(function() {
                                ctx.strokeStyle = "red"
                                addText();
                        }, 6000)
                }
                function textLove() {
                        ctx.lineWidth = 2;
                        var x = 40;
                        var y = 100;
                        ctx.moveTo(x, y);
                        textLove = setInterval(function(){
                                ctx.lineTo(x, 110-0.25*x);
                                x++;
                                y++;
                                ctx.stroke();
                                if(x==220){
                                        clearInterval(textLove)
                                }
                        },10);
                       
                        setTimeout(function(){
                                ctx.strokeStyle = "aqua"
                                ctx.lineTo(220, 55);
                                ctx.lineTo(210, 50)
                                ctx.moveTo(221, 55);
                                ctx.lineTo(213, 65);
                                ctx.stroke();
                        },1900);
                       
                }

                function addText() {
                        var context = "这里可以放一段告白得文字,把你想说得内容写下来,也就是告白得话!";
                        let arr = new Array();
                        arr = context.split("");
                        var str = "";
                        var index = 0;
                        addText = setInterval(function() {
                                str = document.getElementById("text").innerText;
                                str += arr[index];
                                index++;
                                document.getElementById("text").innerText = str;
                                if (index == arr.length) {
                                        clearInterval(addText)
                                }
                        }, 120)
                }

               

                function startAnimation() {
                        ctx = document.getElementById("myCanvas").getContext("2d");
                        //让画布撑满整个屏幕,-20是滚动条的位置,需留出。如滚动条出现则会挤压画布。  
                        WINDOW_HEIGHT = document.documentElement.clientHeight - 20;
                        WINDOW_WIDTH = document.documentElement.clientWidth - 20;
                        ctx.width = WINDOW_WIDTH;
                        ctx.heigh = WINDOW_HEIGHT;
                        drawHeart();
                }

                function drawHeart() {
                        ctx.strokeStyle = "red";
                        ctx.lineWidth = 2; //设置线的宽度  
                        radian = startRadian; //弧度设为初始弧度  
                        radianDecrement = Math.PI / num * 2;
                        ctx.moveTo(getX(radian), getY(radian)); //移动到初始点  
                        i = 0;
                        intervalId = setInterval("printHeart()", time);
                }

                function printHeart() {
                        radian += radianDecrement;
                        ctx.lineTo(getX(radian), getY(radian)); //在旧点和新点之间连线  
                        i++;
                        ctx.stroke(); //画线  
                        if (i >= num) {
                                clearInterval(intervalId);
                        }
                }

                function getX(t) { //由弧度得到 X 坐标  
                        return startX + r * (16 * Math.pow(Math.sin(t), 3));
                }

                function getY(t) { //由弧度得到 Y 坐标  
                        return startY - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
                }
        </script>

</html>


分享至 : QQ空间
收藏

1 个回复

倒序浏览
提示: 作者被禁止或删除 内容自动屏蔽
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马