Home > Developer > Web Develop
Descartes ' heart-shaped line
Peach Heart Shape
This peach heart is more in line with taste. We decided to use this equation.
There are, of course, some other equations, as follows:
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
