大家好，我正在用 JavaScript 开始玩贪吃蛇游戏。现在我要做的是在 Canvas 中央画一个绿色的小方 block 。我已经设置了 fillStyle 并使用了 fillRect 方法，但我什么也没得到。有人可以解释这个问题吗，我真的很感激，谢谢:)
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'limegreen';
ctx.fillRect(375, 250, 10, 10);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>最佳答案
看起来您的 Canvas 尺寸太小(即默认尺寸 300w x 150h)，这意味着绿色矩形绘制在 Canvas 尺寸之外的 [375,250] 处。
尝试设置 Canvas 的 width 和 height 属性(即匹配您的样式)如下:
canvas.width = 750;
canvas.height = 500;
这将确保适当设置 Canvas 分辨率/尺寸，从而使矩形可见。
要点: Canvas 有它自己的维度概念。这些不是从应用于 Canvas 的任何 CSS 样式继承的。
这是一个工作片段:
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
// Necessary to specify the resolution of the canvas
// explicitly by doing this:
canvas.width = 750;
canvas.height = 500;
ctx.fillStyle = 'limegreen';
ctx.fillRect(375, 250, 10, 10);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>关于javascript - 无法在 Canvas 上绘制正方形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54175807/