我在文本编辑器上编写了以下HTML5画布代码：
window.onload = function() {
var canvasPlanet = document.getElementById("canvasPlanet");
var contextPlanet = canvasPlanet.getContext("2d");
var canvasBG = document.getElementById("canvasBackground");
var contextBG = canvasBackground.getContext("2d");
var change = .6;
var interval = 33;
var radius = 0;
var radiusMin = 100;
var numStars1 = 2000;
var numStars2 = 400;
var numStars3 = 30;
var planetSize = 12;
var imageCount = 0;
var xPos = canvasPlanet.width / 2;
var yPos = canvasPlanet.height / 2;
var angle = 0;
var radiusMax = 175;
var colorStar1 = "white";
var colorStar2 = "gray";
var colorStar3 = "darkgray";
var sunSize = 45;
var imageQuant = 2;
contextBG.fillStyle = "black";
contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);
for (var n = 0; n < numStars1; n++) {
var xStar = Math.random() * canvasBG.width;
var yStar = Math.random() * canvasBG.height;
contextBG.fillStyle = colorStar2;
contextBG.fillRect(xStar, yStar, 1, 1);
}
for (var n = 0; n < numStars2; n++) {
var xStar = Math.random() * canvasBG.width;
var yStar = Math.random() * canvasBG.height;
contextBG.fillStyle = colorStar2;
contextBG.fillRect(xStar, yStar, 2, 2);
}
for (var n = 0; n < numStars3; n++) {
var xStar = Math.random() * canvasBG.width;
var yStar = Math.random() * canvasBG.height;
contextBG.fillStyle = colorStar3;
contextBG.fillRect(xStar, yStar, 3, 3);
}
var planet = new Image();
planet.src = "https://vignette.wikia.nocookie.net/future/images/3/34/PLANET.png/revision/latest?cb=20120319180022";
var sun = new image();
sun.src = "https://vignette.wikia.nocookie.net/vsbattles/images/c/ca/Render_sun.png/revision/latest?cb=20160310013337";
sun.onload() {
contextBG.drawImage(sun, 200, 175, sunSize, sunSize);
imageCount++;
if (imageCount == imageQuant)
{
var intervalID = setInterval(drawPlanet, interval)
}
}
planet.onload = function() {
contextPlanet.translate(xPos, yPos);
imageCount++;
if (imageCount == imageQuant)
{
var intervalID = setInterval(drawPlanet, interval)
}
}
function drawPlanet() {
contextPlanet.clearRect(-canvasPlanet.width / 2, -canvasPlanet.height / 2, canvasPlanet.width, canvasPlanet.height);
var angleR = (Math.Pi / 180) * angle;
var calcAS = radiusMax * Math.sin(angleR);
var calcBC = radiusMax * Math.cos(angleR);
radius = (radiusMax * radiusMin) / Math.sqrt((calcAS * calcAS) + (calcBC * calcBC));
contextPlanet.rotate(((Math.PI) / 180 * ) - change);
angle = angle + change;
cantextPlanet.drawImage(planet, radius, 0, planetSize, planetSize);
}
}<div>
<canvas id="canvasPlanet" width="400" height="400" style="border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
<canvas id="canvasBackground" width="400" height="400" style="border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
该代码应该创建一个振荡运动，显示一个围绕太阳绕太空旋转的行星，有许多恒星，但画布由于某种原因不显示。如果有人能告诉我我做错了什么，我会很感激。拜托，谢谢你，
答案 0 :(得分：1)
我已更新代码以显示画布和对象。
window.onload = function() {
var canvasPlanet = document.getElementById("canvasPlanet");
var contextPlanet = canvasPlanet.getContext("2d");
var canvasBG = document.getElementById("canvasBackground");
var contextBG = canvasBackground.getContext("2d");
var change = .006;
var interval = 33;
var radius = 1000;
var radiusMin = 100;
var numStars1 = 2000;
var numStars2 = 400;
var numStars3 = 30;
var planetSize = 12;
var imageCount = 0;
var xPos = canvasPlanet.width/2;
var yPos = canvasPlanet.height/2;
var angle = 0;
var radiusMax = 175;
var colorStar1 = "white";
var colorStar2 = "gray";
var colorStar3 = "darkgray";
var sunSize = 45;
var imageQuant = 2;
contextBG.fillStyle = "black";
contextBG.fillRect(0, 0, canvasBG.width, canvasBG.height);
for(var n=0; n<numStars1; n++)
{
var xStar = Math.random()*canvasBG.width;
var yStar = Math.random()*canvasBG.height;
contextBG.fillStyle = colorStar2;
contextBG.fillRect(xStar, yStar, 1, 1);
}
for(var n=0; n<numStars2; n++)
{
var xStar = Math.random()*canvasBG.width;
var yStar = Math.random()*canvasBG.height;
contextBG.fillStyle = colorStar2;
contextBG.fillRect(xStar, yStar, 2, 2);
}
for(var n=0; n<numStars3; n++)
{
var xStar = Math.random()*canvasBG.width;
var yStar = Math.random()*canvasBG.height;
contextBG.fillStyle = colorStar3;
contextBG.fillRect(xStar, yStar, 3, 3);
}
var planet = new Image();
planet.src = "https://vignette.wikia.nocookie.net/future/images/3/34/PLANET.png/revision/latest?cb=20120319180022";
var sun = new Image();
sun.src = "https://vignette.wikia.nocookie.net/vsbattles/images/c/ca/Render_sun.png/revision/latest?cb=20160310013337";
sun.onload = function()
{
contextBG.drawImage(sun, 200, 175, sunSize, sunSize);
imageCount ++;
if(imageCount == imageQuant)
{var intervalID = setInterval(drawPlanet, interval)}
}
planet.onload = function ()
{
contextPlanet.translate(xPos, yPos);
imageCount ++;
if(imageCount == imageQuant)
{var intervalID = setInterval(drawPlanet, interval)}
}
function drawPlanet()
{
contextPlanet.clearRect(-canvasPlanet.width / 2, -canvasPlanet.height / 2, canvasPlanet.width, canvasPlanet.height);
var angleR = (Math.PI / 180) * angle;
var calcAS = radiusMax * Math.sin(angleR);
var calcBC = radiusMax * Math.cos(angleR);
radius = (radiusMax * radiusMin) / Math.sqrt((calcAS * calcAS) + (calcBC * calcBC));
contextPlanet.rotate(((Math.PI) / 180) - change);
angle = angle + change;
contextPlanet.drawImage(planet, radius, 0, planetSize, planetSize);
}
}<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<canvas id ="canvasPlanet" width="400" height="400"
style ="border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
<canvas id ="canvasBackground" width="400" height="400"
style ="border:2px solid black; position:absolute;
left:auto; top:auto; z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>