canvas-heart

by 亮 薛

HTML

<canvas id="drawing"></canvas>

JavaScript

function draw(SIZE){
 	SIZE = SIZE || 100
    drawing.width = SIZE;
    drawing.height = SIZE;
    if (drawing.getContext){
        var content = drawing.getContext("2d"),
            radian = 0,
            radian1 = 0,
            radian_add = Math.PI/180;
        
        function heart(){
            X = getX(radian1);
            Y = getY(radian1);
            radian1 += radian_add;
            content.lineTo(X,Y);
            content.strokeStyle = "rgba(200, 0, 0, 1)";
        	content.stroke();  //对路径描边
            if (radian1 > (2*Math.PI)){ //绘制完整的心型线后取消间歇调用 
                
            } else {
            	requestAnimationFrame(heart)
            }
        }
        content.beginPath();
        content.translate(SIZE / 2, SIZE / 2);  //设置绘图原点
        content.moveTo(getX(radian1),getY(radian1))
        heart()
    }
	function getX(t){  //获取心型线的X坐标
    	return SIZE / 35 *(16*Math.pow(Math.sin(t),3))
	}

	function getY(t){  //获取心型线的Y坐标
 	   return -SIZE / 35 *(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t))
	}
}



draw(300)