首页 > 代码库 > HTML5 用 canvas 绘制心形线

HTML5 用 canvas 绘制心形线

  1. 笛卡尔的心形线

    技术分享
  2. 桃心形

    技术分享
    技术分享
  3. 这个桃心比较符合口味。。遂决定使用此方程。。

    当然还有一些其它方程,如下:

    技术分享
    技术分享
    技术分享
  4. 下面就开始写程序了.

    <!DOCTYPE html>  

    <html>   

    <head>  

        <title>Draw Heart</title>  

        <style type="text/css">  

            * {  

                margin: 0;  

                padding: 0;  

            }  

      

            html {  

                height: 100%;  

                margin: 0;  

            }  

      

            body {  

                height: 100%;  

                  

            }  

     

            #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> 

HTML5 用 canvas 绘制心形线