因此,在这里,我尝试制作一个半径为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>