我的目标是更改使用html5 canvas arc（）方法创建的“太阳”的半径。尽管我从半径80开始，并且在调用“ dark（）”函数之前每500ms递减一次，该函数应使用新的半径值重新绘制圆。看来我的“临时”函数没有在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;
}在不删除以前的工程图的情况下，您的太阳将在先前的工程图之上逐渐缩小。尝试context.clearRect(400,0,160,160);在dark（）函数的第一行添加内容。
在画布上绘画时，如果要为对象设置动画，则需要将其清除。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句