Question

我的目标是使用html5 canvas arc（）方法更改我创建的“sun”的半径。虽然我以半径80开始并且在调用“dark（）”函数之前每隔500毫秒递减一次，该函数应该用新的半径值重绘圆圈。似乎我的“temp”函数没有在arc（）方法中递减。

<!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Snowman</title>
            <link href="style.css" rel="stylesheet" type="text/css">
            <script>
                var myVar;
                var temp = 80;
                function drawPath() {
                    var canvas=document.getElementById("my-canvas");
                    if (canvas.getContext) {
                        context = canvas.getContext("2d");
                        //day
                        context.canvas.style.backgroundColor = "rgb(153,153,255)";
                        context.fillStyle = "white";
                        context.fillRect(0,350,400,50);
                
                        context.beginPath();
                        context.arc(200,300,70,0,degreesToRadians(360));
                        context.fill();
        
                        context.beginPath();
                        context.arc(200,190,50,0,degreesToRadians(360));
                        context.fill();
                
                        context.beginPath();
                        context.arc(200,110,35,0,degreesToRadians(360));
                        context.fill();
                
                        // eyes
                        context.fillStyle = "black";
                        context.beginPath();
                        context.arc(182.5,110,5,0,degreesToRadians(360));
                        context.fill();
              
                        context.beginPath();
                        context.arc(217.5,110,5,0,degreesToRadians(360));
                        context.fill();
              
                        // nose
                        context.fillStyle = "orange";
                        context.beginPath();
                        context.moveTo(200,120);
                        context.lineTo(200,125);
                        context.lineTo(217.5,122.5);
                        context.closePath();
                        context.fill();
              
                        // mouth
                        context.fillStyle="red";
                        context.beginPath();
                        context.moveTo(185,130);
                        context.bezierCurveTo(185,140,215,140,215,130);
                        context.fill();
             
                        //hat
                        context.fillStyle = "black";
                        context.fillRect(165,85,70,10);
                        context.beginPath();
                        context.moveTo(175,85);
                        context.bezierCurveTo(175,70,225,70,225,85);
                        context.fill();
              
                        //arms
                        context.strokeStyle="orange";
                        context.lineWidth = 3;
                        context.beginPath();
                        context.moveTo(220,190);
                        context.lineTo(270,170);
                        context.stroke();
             
                        context.beginPath();
                        context.moveTo(270,170);
                        context.lineTo(280,165);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(270,170);
                        context.lineTo(280,175);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(270,170);
                        context.lineTo(280,185);
                        context.stroke();
             
                        context.strokeStyle="orange";
                        context.lineWidth = 3;
                        context.beginPath();
                        context.moveTo(182,190);
                        context.lineTo(132,240);
                        context.stroke();
             
                        context.beginPath();
                        context.moveTo(132,240);
                        context.lineTo(122,235);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(132,240);
                        context.lineTo(122,245);
                        context.stroke();
                        context.beginPath();
                        context.moveTo(132,240);
                        context.lineTo(122,255);
                        context.stroke();
             
             
                        // buttons
                        context.fillStyle = "black";
                        context.beginPath();
                        context.arc(200,190,5,0,degreesToRadians(360));
                        context.fill();
             
                        context.beginPath();
                        context.arc(200,240,5,0,degreesToRadians(360));
                        context.fill();
             
                        context.beginPath();
                        context.arc(200,290,5,0,degreesToRadians(360));
                        context.fill();
             
                        //sun
             
                  /*    context.fillStyle = "yellow";*/
                  /*    context.beginPath();*/
                  /*    context.arc(400,0,80,0,degreesToRadians(360),true);*/
                  /*    context.fill();*/
             
                        myVar = setInterval(dark,500);
             
                        //add code here
                    }
                }

                function dark(){
                    var canvas=document.getElementById("my-canvas");
                    if (canvas.getContext) {
                        context = canvas.getContext("2d");
            
                        //sun
                        context.fillStyle = "yellow";
                        context.beginPath();
             
                        context.arc(400,0,temp,0,degreesToRadians(360),true);
                        context.fill();
                        temp--;
             
             
                        if (temp < 0){
                            clearInterval(myVar);
                        }
                    }
                }

                function degreesToRadians(degrees) {
                    return (Math.PI/180)*degrees;
                }
            </script>
        </head>
        <body>
            <canvas id="my-canvas" 
                    height="400" 
                    width="400">
                Your browser doesn't support canvas.
            </canvas>
            <button onclick="drawPath();">
                Draw
            </button>
        </body>
    </html>

#my-canvas {
    border:1px dotted #006;	
}

label {
    display:block;
    float:left;
    width:100px;
    clear:both;	
    font-weight:bold;
}

label[for='red'] {
    color:red;	
}

label[for='green'] {
    color:green;	
}

label[for='blue'] {
    color:blue;	
}

output {
    display:block;
    float:left;	
}

menu {
    display:block;
    float:left;
}

menu h1 {
    font-size:large;
    border-bottom:1px solid #000;	
}

#codecontainer {
    clear:both;
}

#code {
    width:496px;
    height:200px;
    float:left;
    margin-right:10px;
}

section#coordinates {
    display:block;	
    float:left;
}

Answer 1

您的太阳在之前的太阳图上会越来越小，而不会删除之前的图形。尝试在dark（）函数的第一行添加context.clearRect(400,0,160,160);。

在画布上绘图时，如果要为对象设置动画，则需要清除它。

如何动态更改arc（）方法中的radius参数

1 个答案: