我正在嘗試繪制一個帶有兩個塊的畫布，我將把它變成兩個玩家/角色。但是，在前幾行代碼之后，如果我向其中添加任何其他內容，則不再加載任何內容。我剛開始學習 JavaScript，所以我不知道為什么它不起作用。
var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");
canvas.width = 1000
canvas.height = 500
c.fillRect(50, 50, canvas.width, canvas.height)
// If i try add the code below then everything disappears.
/*
class Sprite {
constructor(position) {
this.position = position
}
draw() {
c.fillStyle='red'
c.fillRect(this.position.x, this.position.y, 50, 150)
}
}
const player = new Sprite( {
x: 0,
y: 0
} )
player.draw()
const enemy = new Sprite(
{
x: 400,
y: 100
}
)
enemy.draw()
console.log(player) */<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>STREET FIGHTER</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="index.js"></script>
</body>
</html>uj5u.com熱心網友回復：
對我來說效果很好...
我看不到任何會導致您描述的行為的內容
請參見下面的代碼，我洗掉了對您的課程的評論：
var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");
canvas.width = canvas.height = 140
c.fillRect(50, 30, canvas.width, canvas.height)
class Sprite {
constructor(rect, color) {
this.rect = rect
this.color = color
}
draw() {
c.fillStyle = this.color
c.fillRect(this.rect.x, this.rect.y, this.rect.w, this.rect.h)
}
}
const player = new Sprite({ x: 15, y: 10, w:9, h:9 }, "red")
player.draw()
const enemy = new Sprite({ x: 90, y: 35, w:20, h:10}, "cyan")
enemy.draw()
console.log(player)<canvas id="canvas"></canvas>我對建構式中的引數進行了一些更改，但不會影響您的原始代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/494818.html
標籤：javascript html 帆布
下一篇：使用React向下滾動時加寬影像