<!DOCTYPE html>
<html lang="en">
<head>
<title>❥</title>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
</head>
<body <!-- onload="countSecond() -->">
<h1>ღ( ´･ᴗ･` )</h1>
<canvas id="myCanvas" onclick="countSecond1()" width="3000" height="1500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var n=1
shrink=0
function countSecond1()
{
if(n<80){
n++;
shrink=shrink+2.5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="3";
ctx.strokeStyle="HotPink";
for(var θ=0;θ<=360;θ=θ+Math.PI/180){
x1=16*Math.pow(Math.sin(θ),3);
y1=13*Math.cos(θ)-5*Math.cos(2*θ)-2*Math.cos(3*θ)-Math.cos(4*θ);
x2=16*Math.sin(θ+Math.PI/180)*Math.sin(θ+Math.PI/180)*Math.sin(θ+Math.PI/180);
y2=13*Math.cos(θ+Math.PI/180)-5*Math.cos(2*(θ+Math.PI/180))-2*Math.cos(3*(θ+Math.PI/180))-Math.cos(4*(θ+Math.PI/180));
ctx.moveTo(x1*8*(1-shrink/100)+100+460,-y1*8*(1-shrink/100)+200);
ctx.lineTo(x2*8*(1-shrink/100)+100+460,-y2*8*(1-shrink/100)+200);
}
ctx.stroke();
setTimeout("countSecond()", 100);
}
}
a=2
function countSecond()
{
if(a<40){
a++;
shrink=shrink+2.5
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="3";
ctx.strokeStyle="HotPink";
for(var θ=0;θ<=360;θ=θ+Math.PI/180){
x1=16*Math.pow(Math.sin(θ),3);
y1=13*Math.cos(θ)-5*Math.cos(2*θ)-2*Math.cos(3*θ)-Math.cos(4*θ);
x2=16*Math.sin(θ+Math.PI/180)*Math.sin(θ+Math.PI/180)*Math.sin(θ+Math.PI/180);
y2=13*Math.cos(θ+Math.PI/180)-5*Math.cos(2*(θ+Math.PI/180))-2*Math.cos(3*(θ+Math.PI/180))-Math.cos(4*(θ+Math.PI/180));
ctx.moveTo(x1*8*(1-shrink/100)+100+460,-y1*8*(1-shrink/100)+200);
ctx.lineTo(x2*8*(1-shrink/100)+100+460,-y2*8*(1-shrink/100)+200);
}
ctx.stroke();
setTimeout("countSecond()", 100);
}
}
</script>
</body>
</html>心形线5.0
猜你喜欢
转载自blog.csdn.net/weixin_58465955/article/details/121319446
今日推荐
周排行