html5爱心,html5爱心代码

如何用html5 canvas画出一颗爱心

!DOCTYPE html  

html  

  

head  

    titleDraw 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 = [];//保存所有的XY坐标，只为验证。实际程序中可删除。  

        var r = 4;  

        var radian;//弧度  

        var i;  

        var radianDecrement;//弧度增量  

        var time = 10;//每个点之间的时间间隔  

        var intervalId;  

        var num = 360;//分割为 360 个点  

        var startRadian = Math.PI;  

        var ctx;  

        window.onload = function () {  

            startAnimation();  

        }  

        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 = 1;//设置线的宽度  

            radian = startRadian;//弧度设为初始弧度  

            radianDecrement = Math.PI / num * 2;  

            ctx.moveTo(getX(radian), getY(radian));//移动到初始点  

            i = 0;  

            intervalId = setInterval("printHeart()", time);  

        }  

        //x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t)  

        function printHeart() {  

            radian += radianDecrement;  

            ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线  

            //arr.push("X:" + getX(radian) + "br/Y:" + getY(radian) + "br/");  

            i++;  

            ctx.stroke();//画线  

            if (i = num) {  

                clearInterval(intervalId);  

                //document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。  

            }  

        }  

        function getX(t) {//由弧度得到 X 坐标  

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

        }  

  

        function getY(t) {//由弧度得到 Y 坐标  

            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

相关问答

Q1: html5网页底部会跳动的小爱心，有大神有源码吗？

在下研究了一下源代码，渗透到了服务器找了一下：

并强行爆破了一下

最终发现，这是引入了Font Awesome图标，并启用css3动画所制成的

原理为：

用Font Awesome引入一个心形，并用css设置为红色，再用css3关键帧动画使其放大缩小

这是从官网瓢来的源代码：（请确认已引入Font Awesome）

i class="fa fa-heart" style="font-size:48px;color:red;animation:iconAnimate 5s;"/i

css3代码如下

@keyframes iconAnimate {

0%, 100% {

transform: scale(1);

}

10%, 30% {

transform: scale(0.9);

}

20%, 40%, 60%, 80% {

transform: scale(1.1);

}

50%, 70% {

transform: scale(1.1);

}

}

Q2: 如何去除html5爱心树表白代码的进入界面爱心边上的 come baby

F12 调试页面，Ctrl+F　搜索 Come Baby 找到它的位置，修改它，保存源码，重新运行