对于我正在做的一个项目,我需要使用 arc 函数和 lineTo 函数在画布上绘制一个太阳系,并在它们之间一键按下切换。我想我很接近我可以切换一次但我不能切换回原来的。很抱歉有大量代码,但我已经为此工作了几个小时,我不再记得什么是重要的。
if (window.addEventListener)
{
window.addEventListener( 'load', initialise, false);
window.addEventListener('keydown',onKeyDown, false);
}
var canvas;
var context;
var angle = 0;
var time = 20;
var paused = false;
var timer;
var drawStyle = drawArc();
function onKeyDown(event)
{
var keyCode = event.keyCode;
switch(keyCode)
{
case 80: //p
togglePause();
break;
}
switch(keyCode)
{
case 75: //k
toggleDrawStyle();
break;
}
switch(keyCode)
{
case 70: //f
speedUp();
break;
}
switch(keyCode)
{
case 82: //r
speedDown();
break;
}
}
function toggleDrawStyle()
{
if(drawStyle == drawArc())
{
drawStyle = drawLine();
}
else if(drawStyle == drawLine())
{
drawStyle = drawArc();
}
}
function speedUp()
{
time = time / 2;
}
function speedDown()
{
time = time * 2;
}
function togglePause()
{
if (!paused)
{
clearInterval(timer);
paused = true;
}
else
{
timer = setInterval(drawArc, time);
timer = setInterval(drawLine, time);
paused = false;
}
}
function initialise()
{
canvas = document.getElementById('canvas');
if (!canvas.getContext)
{
alert('Error: no canvas.getContext!');
return;
}
context = canvas.getContext('2d');
if (!context)
{
alert('Error: failed to getContext!');
return;
}
timer = setInterval(drawArc, time);
}
function drawArc()
{
clearCanvas();
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);
incrementAngle();
context.save();
//draw the sun
context.translate(canvas.width/2, canvas.height/2);
context.rotate(convertToRadians(angle));
circle(0, 0, 30, "#ffaa00");
//draw mercury
context.save();
context.rotate(convertToRadians(angle)*1.5);
moveCirlce(1/6, 1/6 , 30 , 30, "#555555");
context.restore();
//draw venus
context.save();
context.rotate(convertToRadians(angle)*1.25);
moveCirlce(1/5, 1/5, 40, 40, "#aa0011");
context.restore();
// draw earth
context.save();
context.rotate(convertToRadians(angle));
moveCirlce(0.3, 0.3, 55, 55, "#0077ff");
context.restore();
//draw the moon
context.save();
context.rotate(convertToRadians(angle));
context.translate(55, 55);
context.rotate(convertToRadians(angle) * 2);
moveCirlce(1/15, 1/15, 10, 10, "#555555");
context.restore();
//draw mars
context.save();
context.rotate(convertToRadians(angle) *0.9);
moveCirlce(1/3, 1/3, 80, 80, "#ff0000");
context.restore();
//draw jupiter
context.save();
context.rotate(convertToRadians(angle)* 0.75);
moveCirlce(2/3, 2/3, 110, 110, "#cc8811");
context.restore();
//draw sautrn
context.save();
context.rotate(convertToRadians(angle)*0.55);
moveCirlce(17/30, 17/30, 140, 140, "#dd7722");
context.restore();
//draw uranus
context.save();
context.rotate(convertToRadians(angle)*0.3);
moveCirlce(14/30, 14/30, 170, 170, "#4444ff");
context.restore();
//draw neptune
context.save();
context.rotate(convertToRadians(angle)*0.2);
moveCirlce(11/30, 11/30, 190, 190, "#9999ff");
context.restore();
context.restore();
}
function drawLine()
{
clearCanvas();
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);
incrementAngle();
context.save();
//draw sun
context.translate(canvas.width/2, canvas.height/2);
context.rotate(convertToRadians(angle));
lineCircle(0, 0, 30, "#ffaa00");
//draw mercury
context.save();
context.rotate(convertToRadians(angle)*1.5);
moveLineCirlce(1/6, 1/6 , 30 , 30, "#555555");
context.restore();
//draw venus
context.save();
context.rotate(convertToRadians(angle)*1.25);
moveLineCirlce(1/5, 1/5, 40, 40, "#aa0011");
context.restore();
// draw earth
context.save();
context.rotate(convertToRadians(angle));
moveLineCirlce(0.3, 0.3, 55, 55, "#0077ff");
context.restore();
//draw the moon
context.save();
context.rotate(convertToRadians(angle));
context.translate(55, 55);
context.rotate(convertToRadians(angle) * 2);
moveLineCirlce(1/15, 1/15, 10, 10, "#555555");
context.restore();
//draw mars
context.save();
context.rotate(convertToRadians(angle) *0.9);
moveLineCirlce(1/3, 1/3, 80, 80, "#ff0000");
context.restore();
//draw jupiter
context.save();
context.rotate(convertToRadians(angle)* 0.75);
moveLineCirlce(2/3, 2/3, 110, 110, "#cc8811");
context.restore();
//draw sautrn
context.save();
context.rotate(convertToRadians(angle)*0.55);
moveLineCirlce(17/30, 17/30, 140, 140, "#dd7722");
context.restore();
//draw uranus
context.save();
context.rotate(convertToRadians(angle)*0.3);
moveLineCirlce(14/30, 14/30, 170, 170, "#4444ff");
context.restore();
//draw neptune
context.save();
context.rotate(convertToRadians(angle)*0.2);
moveLineCirlce(11/30, 11/30, 190, 190, "#9999ff");
context.restore();
context.restore();
}
function convertToRadians(degree)
{
return degree*(Math.PI/180);
}
function incrementAngle()
{
angle++;
}
function clearCanvas()
{
canvas.width = canvas.width;
}
function circle(x, y, r , col)
{
context.beginPath();
context.arc(x, y, r, 0, 2*Math.PI);
context.fillStyle = col;
context.fill();
}
function moveCirlce(a, b, x, y, col)
{
context.save();
context.translate(x, y);
context.scale(a, b);
circle(0, 0, 30, col);
context.restore();
}
function lineCircle(a, b, r, col)
{
var theta = Math.PI * 2 / 9;
for (var i = 0; i <= 9; i = i + 1)
{
var angle = theta * i;
var x = a + r * Math.cos(angle);
var y = b + r * Math.sin(angle);
if (i == 0)
{
context.moveTo(x,y);
}
else
{
context.lineTo(x,y);
}
}
context.fillStyle = col;
context.fill();
}
function moveLineCirlce(a, b, x, y, col)
{
context.save();
context.translate(x, y);
context.scale(a, b);
lineCircle(0, 0, 30, col);
context.restore();
}
initialise();
drawArc();