HTML5 用 canvas 繪製心形線

時間 2019-12-08

標籤 html5 html canvas 繪製心形線欄目 HTML5 简体版

原文原文鏈接

笛卡爾的心形線javascript
桃心形css
這個桃心比較符合口味。。遂決定使用此方程。。html

固然還有一些其它方程，以下：java
下面就開始寫程序了.canvas

<!DOCTYPE html>  htm

<html>   blog

<head>  ip

    <title>Draw Heart</title>  ci

    <style type="text/css">  rem

        * {

            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>