Question

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

我目前有这段代码：

＆＃13;

<!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;

这就是目前的情况： Screenshot

我真的很感激任何帮助！

Answer 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.offsetX和e.offsetY来获取相对于画布的正确鼠标坐标。

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

1 个答案: