canvas 圆形心跳

canvas点击之后缩放,模拟心脏跳动的效果

window.onload = function() {
		var canvas = document.getElementById("canvas");
		var obj = canvas.getContext('2d');
	
		obj.arc(200, 200, 50, 0, 360);
		obj.stroke();
		var angle = 0;
		canvas.onclick = function(e) {
			var mx = e.layerX;
			var my = e.layerY;
	
			if(obj.isPointInPath(mx, my)) {
	
				setInterval(function() {
					obj.clearRect(0, 0, 600, 600);
					angle += 0.2;
					obj.beginPath();
					obj.arc(200, 200, 50 + 10 * Math.sin(angle), 0, 2 * Math.PI);
					obj.stroke();
				}, 50);
			};
		};
	
	};

  

posted @ 2016-08-08 21:09  yugl  阅读(659)  评论(0编辑  收藏  举报