HTML5 using canvas to draw the heart-shaped line

Source: Internet
Author: User
Tags cos gety sin

  1. Descartes ' heart-shaped line

  2. Peach Heart Shape

  3. This peach heart is more in line with taste. We decided to use this equation.

    There are, of course, some other equations, as follows:

  4. Now we're going to start writing the program.

    <! DOCTYPE html>

    <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 = [];//saves all XY coordinates for validation only. The actual program can be deleted.

    var r = 4;

    var radian;//radians

    var i;

    var radiandecrement;//radians Increment

    var time = 10;//The interval between each point

    var intervalid;

    var num = 360;//Split to 360 points

    var Startradian = Math.PI;

    var ctx;

    Window.onload = function () {

    Startanimation ();

    }

    function Startanimation () {

    CTX = document.getElementById ("MyCanvas"). GetContext ("2d");

    Let the canvas fill the entire screen, 20 is the position of the scroll bar, need to set aside. If the scroll bar appears, it will squeeze the canvas.

    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;//Set the width of the line

    Radian = startradian;//radians set to initial radians

    Radiandecrement = Math.pi/num * 2;

    Ctx.moveto (GetX (Radian), GetY (Radian));//move to initial point

    i = 0;

    Intervalid = SetInterval ("Printheart ()", time);

    }

    x = sin^3 T, y = (the cos t-5 cos 2t-2 cos 3t-cos 4t)

    function Printheart () {

    Radian + = radiandecrement;

    Ctx.lineto (GetX (Radian), GetY (Radian));//Connect between the old point and the new point

    Arr.push ("X:" + GetX (radian) + "<br/>y:" + GetY (radian) + "<br/>");

    i++;

    Ctx.stroke ();//Draw Line

    if (i >= num) {

    Clearinterval (Intervalid);

    document.getElementById ("BS"). InnerHTML = Arr.join ("");//print all XY coordinate points.

    }

    }

    function GetX (t) {//X coordinate by radians

    return + R * (Math.pow * (Math.sin (t), 3));

    }

    function GetY (t) {//Y coordinates are obtained by radians

    Return 50-r * (Math.Cos (t)-5 * MATH.COS (2 * t)-2 * MATH.COS (3 * t)-Math.Cos (4 * t));

    }

    </script>

    <body>

    <div id= "Canvaszone" >

    <canvas id= "MyCanvas" ></canvas>

    </div>

    <div id= "BS" >

    </div>

    </body>

HTML5 using canvas to draw the heart-shaped line

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.