<!DOCTYPE html>
<html>
<head>
<title>Heart</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
background-color:white;
}
#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 = [];
var r = 4;
var radian;
var i;
var radianDecrement;
var time = 10;
var intervalId;
var num = 360;
var startRadian = Math.PI;
var ctx;
window.onload = function () {
startAnimation();
}
function startAnimation() {
ctx = document.getElementById("myCanvas").getContext("2d");
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);
}
function printHeart() {
radian += radianDecrement;
ctx.lineTo(getX(radian), getY(radian));
i++;
ctx.stroke();
if (i >= num) {
clearInterval(intervalId);
}
}
function getX(t) {
return 100 + r * (16 * Math.pow(Math.sin(t), 3));
}
function getY(t) {
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>
心形图
最新推荐文章于 2024-05-03 16:40:06 发布