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

HTML部分:

1.<a οnclick="logoClick()"></a>

2.<div id="canvasZone">
       <canvas id="myCanvas"></canvas>
   </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>");//重新建立画布并开始进行内容绘制
       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));
}

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/5058321.html