Question

我正在为课程做eCard，我决定使用特定对象的类创建动画。我要做的第一件事就是尝试使用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>

Answer 1

你没有调用函数fill和stroke.invoke填充和描边方法应该解决你的问题

DrawBackground: function() {
    console.log('here')
    context.strokeStyle = 'black';
    context.fillStyle = 'black';
    context.beginPath();
    context.rect(0,0,canvas.width,canvas.height);
    context.stroke(); // invoke stroke
    context.fill(); // invoke fill
    context.closePath();
},

如何让JavaScript对象在屏幕上正确显示矩形？

1 个答案: