Canvas画心❤~

520那天做的，有丢丢丑~~~跟着一个人的博客做的，忘了是谁了，这不算侵权把！

//这里的c这个参数和上一篇博文中一样是获取canvas这个对象,x,y是控制画心的位置的，r为控制心得大小~~
function drawingHeart(c,x,y,r){
    //开始画心
    //保存所有的xy坐标
    //var arr=[];
    var r=r;//这个是控制❤的大小的，你要自己设定一下，可以改一下
    var radian;//弧度
    var i;
    var radianDe;//弧度增量
    var time=15;//每个点之间的时间间隔
    var inter;//时长
    var num=360;//分割成360个点，360°
    var startRadian=2*Math.PI;//开始弧度
    var ctx;
    //var m=0;
    //var c=document.getElementById("can");
    ctx=c.getContext('2d');
//setInterval(startAnimation,2000);
    startAnimation();
    function startAnimation(){
        //这个是预留的边，为canvas画布设置大小
        WINDOW_HEIGHT=document.documentElement.clientHeight-20;

        WINDOW_WIDTH=document.documentElement.clientWidth-20;

        ctx.width=WINDOW_WIDTH;

        ctx.height=WINDOW_HEIGHT;
        //console.log(ctx.width,ctx.height);
        drawHeart();//现在才开始画心
    }
    function drawHeart(){
    //画笔颜色，我选的红色
        ctx.strokeStyle="rgba(255,0,0,0.3)";
        ctx.lineWidth=2;//设直线的宽度
        radian=startRadian;//设置弧度为初始弧度
        radianDe=Math.PI/num*2;
        ctx.moveTo(getX(radian),getY(radian));//那两个函数是画心的公式，我看那个大佬用matlab还是啥画了好多种❤，公式不同，想要不同中❤，把公式一换就行了
        i=0;//计数用的，他分了360个点画。
        inter=setInterval(printHeart,time);//得用计时器来控制他画的事时间
    }

    function printHeart(){
        // var c=document.getElementById("can");
        radian+=radianDe;
        ctx.lineTo(getX(radian),getY(radian));//在新旧之间连线
        i++;
        ctx.stroke();//划线
        if(i>=num){
            //console.log(arr);
            clearInterval(inter);//大于等于的时候就清除计时器
            //清除画布
            //i=0;
            //ctx.clearRect(0,0,c.width,c.height);
        }
    }

//公式为x=16sin~3t,y=(13cost-5cos2t-2cos3t-cos4t)
//这里的x，y都可以自己设定，这个xy是改变心得位置的，
    function getX(t){
        //console.log(100+r*(16*Math.pow(Math.sin(t),3)))
        return x+r*(16*Math.pow(Math.sin(t),3))
    }

    function getY(t){
        //console.log(50-r*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t)))
        return y-r*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t));
    }
}

如果你要画心的话，记得先把canvas画大一点，然后根据xy，还有r的大小去画心~~~