HTML5 用 canvas 繪製心形線

最後更新：2017-07-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：height net bsp win 刪除 -o image pow tin

笛卡爾的心形線
桃心形
這個桃心比較符合口味。。遂決定使用此方程。。
當然還有一些其它方程，如下：
下面就開始寫程式了.
<!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 繪製心形線

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More