HTML画布,如何在单击鼠标时在鼠标位置创建一个圆,然后让圆圈在半径上增加?

时间:2017-05-08 17:54:47

标签: html animation canvas geometry

所以,我自己尝试过尝试并在线搜索,我似乎无法解决这个问题。我试图做一个非常简单的效果,看起来像一个非常基本的水波纹。我打算让用户能够在画布上的某个位置单击,并且可以在鼠标单击的位置(从零半径开始)显示空白圆圈(带有黑色笔触),并不断将半径扩展为动画

我目前有这段代码:



<!DOCTYPE html>
<html>
	<head>
 		<!-- Search Engine Optimisation (SEO) -->
 		<title> Ripple </title>
 		<meta description="Codelab assignment 3">
 		<meta keywords="Uni, assignment, ripple, interactive, discovery">
 		<!-- End of Metadata -->
 		<!-- Links -->
 		<link rel="stylesheet" type="text/css" href="style.css">
 	</head>
 	<body>
 		<canvas id="myCanvas" width="1024" height="768" style="border: 1px solid"></canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		var canvasWidth = canvas.width;
		var canvasHeight = canvas.height;
		var radius = 0;
		
		//Have a rectangle fill the canvas and add a hit region
		//Call the ripple function from the rectangle function
		//Track mouse position in rectangle

		function ripple(e) {
			// ctx.clearRect(0, 0, canvasWidth, canvasHeight);
			ctx.beginPath();
			ctx.arc(e.clientX,e.clientY,radius,0,2*Math.PI);
			//ctx.closePath();
			ctx.stokeStyle = "black";
			ctx.stroke();

			radius++;

			requestAnimationFrame(ripple);
		}

		canvas.addEventListener('mousedown', ripple);
	</script>
</html>
&#13;
&#13;
&#13;

这就是目前的情况: Screenshot

我真的很感激任何帮助!

1 个答案:

答案 0 :(得分:1)

通过 requestAnimationFrame 调用ripple函数时,您必须传递鼠标事件

另外,您需要将半径设置为0并在鼠标单击时清除正在运行的动画帧(如果有)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var radius = 0;
var rAF;

function ripple(e) {
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.beginPath();
    ctx.arc(e.offsetX, e.offsetY, radius, 0, 2 * Math.PI);
    ctx.stokeStyle = "black";
    ctx.stroke();
    radius++;
    rAF = requestAnimationFrame(function() {
        ripple(e);
    });
}
canvas.addEventListener('mousedown', function(e) {
    if (rAF) cancelAnimationFrame(rAF);
    radius = 0;
    ripple(e);
});
body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #ccc}
<canvas id="canvas" width="635" height="208"></canvas>

注意:使用e.offsetXe.offsetY来获取相对于画布的正确鼠标坐标。