【发布时间】：2018-07-21 14:52:51
【问题描述】：
我正在为类制作电子贺卡，我决定使用类为特定对象创建动画。我要做的第一件事是尝试让背景使用 Background.DrawBackgound 在整个画布上绘制一个黑色矩形。但没有任何效果。
我什至尝试在底部复制/粘贴绘图代码以使其绘制，但它不会绘制。我以前用 C# 做过课程，但有点生疏，所以我想我在设置课程的方式上有些错误。
这是 .js：
//james gossling multimedia for web design spring 2018
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
//game classes go here
Background = function() {
};
Background.prototype = {
DrawBackground: function() {
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.beginPath();
context.rect(0,0,canvas.width,canvas.height);
context.stroke;
context.fill;
context.closePath();
},
};
Confetti = function() {
};
Confetti.prototype = {
};
Firework = function() {
};
Firework.prototype = {
};
UncleSam = function() {
};
UncleSam.prototype = {
};
Text = function() {
};
Text.prototype = {
};
//other functions
var ClearScreen = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
};
var DrawObjects = function() {
//ClearScreen();
Background.DrawBackground();
};
var UpdatePositions = function(modifier) {
};
var Reset = function() {
};
//MAIN GAME LOOP FXN///////////////////
// The main game loop
var main = function() {
var now = Date.now();
var delta = now - then;
DrawObjects();
UpdatePositions(delta / 1000);
then = now;
//possibly do RESET
// Request to do this again ASAP
requestAnimationFrame(main);
};
// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
//START ECARD
var then = Date.now();
Background = new Background();
Reset();
main();
Background.DrawBackground();
这是 .html：
<!DOCTYPE html>
<html>
<head>
<title>JamesG WebDesign</title>
<meta charset='UTF-8'>
<style>
body {
background-color: aqua;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
p {
text-align: center;
}
#toMain {
margin-left: auto;
margin-right: auto;
text-align: center;
}
a {
font-size: 150%;
}
#canvas {
display: block;
margin: 0 auto;
background: #ffffff;
border: thin inset #aaaaaa;
}
#ResetAboveCanvas {
margin: 20px 0px 20px 450px;
}
</style>
</head>
<body>
<h2>James Gossling Multimedia for Web Design Spring 2018 </h2>
<p><strong>4th of July eCard</strong>
</p>
<canvas id='canvas' width='600' height='800'>
Canvas not supported
</canvas>
<script src='TestPC.js'></script>
<br>
<div id="toMain">
<a href="http://webstudentwork.com/jgossling/MMWD/index.html">Back to Main</a>
</div>
</body>
</html>
【问题讨论】：
标签： javascript html oop canvas