用javaScript结合canvas用图片绘制动态心形
心形数学公式：
x=16(sint)3 （3为3次幂）
y=13cost- 5cos2t-2cos3t-cos4t
（t为x轴与y轴的角度）
注意：该公式绘制的的心形是倒着的，需要将y轴坐标取反，即可得到正着的心形。
同理，心形里插入的图片也是倒着的，简单的方法是可以先将图片提前旋转180度后导入到文件，使用时刚好再反过来为正常的。
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas_render_heart</title>
<style>
</style>
</head>
<body>
<canvas id="heart"></canvas>
</body>
</html>
<script>
if(!document.createElement("canvas").getContext){
var msg= document.createElement( "div");
msg.innerHTML="可以使用canvas";
document. body.append(msg);
//console.log("dont't use canvas");
}else{
//console.log("can use canvas");
var canvas=document.getElementById("heart");
canvas.width=600;
canvas.height=600;
canvas.style.width=canvas.width+"px";
canvas.style.height=canvas.height+"px";
var context=canvas.getContext("2d");
context.translate(canvas.width/2,canvas.height/2);//将坐标系移动到canvas的中心
context.scale(1,-1);
context.moveTo(0,0);
var imgs=[];
for(j=1;j<=5;j++){
var img=new Image(50,50);
img.src="./imgs/"+j+".jpg";
//img.src=`./imgs/${j}.jpg`;
imgs.push(img);
}
var i=0; //半径与x轴的夹角
var t=0; //通过t 绘制不同的圆
var ticket=setInterval(function(){
render();
},80);
function render(){
i=i+0.2;
if(t>=5){
t=0;
}
var r=14;//控制心形大小
var x=r*16*Math.sin(i)*Math.sin(i)*Math.sin(i);
var y=r*(13*Math.cos(i)-5*Math.cos(2*i)-2*Math.cos(3*i)-Math.cos(4*i));
context.drawImage(imgs[t],x,y,imgs[t].width,imgs[t].height);
//context.scale(1,-1);
t=t+1;
//console.log(i);
if(i>6){
clearInterval(ticket);
}
}
}
</script>
