所以，在这里我试图创建一个半径为1的圆并将其增加到200，然后我希望它变小到1并循环它。
我知道g_radius ++然后g_radius --正在创造一种效果，好像它已经停止但无法找到解决方案。
这是我到目前为止所尝试的。我可以增加它或减少它。
<html>
<canvas width="800" height="600" id="myCanvas"> </canvas>
<script>
var g_canvas = document.getElementById("myCanvas");
var g_context = g_canvas.getContext("2d");
var g_radius = 10 ;
function f_drawCircle()
{
g_context.fillStyle = "blue" ;
g_context.beginPath();
g_context.arc(400,300,g_radius,0,2*Math.PI) ;
g_context.fill();
}
function f_clearCanvas()
{
g_context.clearRect(0,0,g_canvas.width,g_canvas.height);
g_context.strokeRect(0,0,g_canvas.width,g_canvas.height);
}
function f_varySize()
{
g_radius ++ ;
if(g_radius > 200)
{
g_radius -- ;
}
}
function f_loop()
{
f_varySize();
f_clearCanvas();
f_drawCircle();
}
setInterval(f_loop,10);
</script>
为大小更改的方向创建变量，然后将其值添加到g_radius。像这样：
var dir = 1;
function f_varySize() {
if (g_radius > 200) {
dir = -1;
}
if (g_radius < 2) {
dir = 1;
}
g_radius += dir;
}