jquery/javascript画心爱心方法

jquery/javascript画心爱心方法，只需要设置好画心容器的长宽(必须有长宽)，将这句放入容器中，方法中传入jquery容器对象，调用方法就ok

html代码

<div class="rightFrame" style="border: #000000 solid 1px;width:50px height: 50px;">
	<canvas id="gycanvas"></canvas>
</div>

js、jquery代码

let rightFrame=$(’.rightFrame’);
drowHert(rightFrame);

function drowHert(conFrame){
				//画心方法，只需要设置好画心容器的长宽(必须有长宽)，方法中传入jquery容器对象
				var width=conFrame.width();
				var height=conFrame.height();
				console.log('width:'+width+',height:'+height)
				$('#gycanvas').attr({
					"width": width,
					"height": height
				})
				//开始画  
				let x0 = conFrame.offset().left+width/2;
				let y0 = conFrame.offset().top+height/2;
				console.log(x0+','+y0)
				let context = $('#gycanvas')[0].getContext('2d');
				context.fillStyle = "#F21972";//线条颜色
				let x, y;
				let t = -3;
				let inteWei = setInterval(function() {//外部定时器，为了画心加速，不需要可以删除
						let inte = setInterval(function() {//内部定时器，为了动态画心
							if (t <=3) {
								x = 16 * Math.pow(Math.sin(t), 3);
								y = 13 * Math.cos(t) - 5 * Math.cos(t * 2) - 2 * Math.cos(t * 3) - Math.cos(t * 4);
								t = t + 0.002;//点的数量，约大点越少，速度越快
								x = x *  width/35;
								y = y *  height/35;
								console.log(x+','+y)
								context.fillRect(x +width/2, height/2 - y, 1, 1);//(每个点横坐标,每个点纵坐标,每个点宽度,每个点长度)
							} else {
								clearInterval(inte);
								clearInterval(inteWei);
								console.log('清除内、外部定时器'+x+','+y)
							}
						}, 0);//控制画心速度，数字越小，速度越快
						
				}, 0);//控制画心速度，数字越小，速度越快
			};