html 心形曲线

最新推荐文章于 2024-07-25 11:26:35 发布

lyliiyong

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量822

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Liyong_liyong/article/details/105903089

版权

html心形曲线代码

<!DOCTYPE html>  

<html>   

<head>  

    <title>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;*/  

        }  

    </style>  

    <script type="text/javascript">  

        var arr = [];  

        var r = 4;  

        var radian;  

        var i;  

        var radianDecrement;  

        var time = 10;  

        var intervalId;  

        var num = 360;

        var startRadian = Math.PI;  

        var ctx;  

        window.onload = function () {  

            startAnimation();  

        }  

        function startAnimation() {  

            ctx = document.getElementById("myCanvas").getContext("2d");    

            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 = 1;  

            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) { 

            return 100 + r * (16 * Math.pow(Math.sin(t), 3));  

        }  



        function getY(t) { 

            return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));  

        }  

    </script>   

</head>    

<body>    

    <div id="canvasZone">  

        <canvas id="myCanvas"></canvas>  

    </div>  

    <div id="bs">  

    </div>    

</body>    

</html>

效果图
在这里插入图片描述

lyliiyong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 心形曲线

html心形曲线代码<!DOCTYPE html> <html> <head> <title>Heart</title> <style type="text/css"> * { margin: 0; p...
复制链接

扫一扫