笛卡尔心形线 - SKILL.NULL

HTML部分:

1.<a onclick="logoClick()"></a>

2.<div id="canvasZone">

</div>

CSS部分：

#canvasZone {

width: 100%;

height: 100%;

text-align: center;

padding-top: 20px;

margin-left: -35px;

}

#myCanvas {

height: 300px;

width: auto;

}

JS部分：

var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。

var r = 4;

var radian;//弧度

var i;

var radianDecrement;//弧度增量

var time = 15;//每个点之间的时间间隔

var intervalId;

var num = 618;//分割为 618 个点

var startRadian = Math.PI;

var ctx;

function logoClick () {

startAnimation();

window.setInterval("lisner()", 1);//监听事件，监听是否画所有的点

}

function lisner () {

if (i >= num) {//判断点是否画完

i = 0;//当所有的点画完即进行初始化

//清空画布("#canvasZone").empty();

// 清空画布("#canvasZone").append("<canvas id=\"myCanvas\"></canvas>");

// 重新建立画布并开始进行内容绘制

("#canvasZone").empty();

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));

}

一	二	三	四	五	六	日
« 8月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

标签：笛卡尔心形线

实现笛卡尔心形线的重复循环绘制