html/css画布宽度/高度处理

bvn4nwqk 于 12个月前发布在其他

关注(0)|答案(2)|浏览(75)

我正试图用JavaScript为学校项目编写Snake作为一个浏览器游戏，我想用一个外部的.js文件来做-而不仅仅是. html。我现在的问题是：当我在html主体中调用main函数时，只有画布被我的脚本修改，而不是snakeparts。
index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Snake - The Browser Game</title>
    </head>
    <body onload='main()'>
        <canvas id="gameCanvas">
            
        </canvas>
    <script type="text/javascript" src="snake.js"></script>
    </body>
</html>

style.css:

#gameCanvas {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

snake.js:

const board_border = 'black';
const board_background = "white";
const snake_col = 'lightblue';
const snake_border = 'darkblue';

const snakeboard = document.getElementById('gameCanvas');
const snakeboard_ctx = gameCanvas.getContext('2d');

let snake = [{x: 200, y: 200}, {x: 190, y: 200}, {x: 180, y: 200}, {x: 170, y: 200}, {x: 160, y: 200}]

function main(){
    clearCanvas();
    drawSnake();
}

function clearCanvas(){
    snakeboard_ctx.fillStyle = board_background;
    snakeboard_ctx.strokestyle = board_border;
    snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
    snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
}

function drawSnake(){
   snake.forEach(drawSnakeparts);
}

function drawSnakeparts(snakePart){
    snakeboard.fillStyle = snake_col;
    snakeboard.strokeStyle = snake_border;
    snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
    snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

我是相当新的所有的东西，无法找到答案后，大量的谷歌搜索和问gpt.

Html

来源：https://stackoverflow.com/questions/77247258/html-css-canvas-width-height-handling

2条答案

按热度按时间

tvmytwxo1#

您需要设置画布的宽度/高度。如果不指定，则默认值为300 x150。由于你的蛇位于y：200，它在可见区域之外。
读取HTMLCanvasElement: width property和HTMLCanvasElement: height property
使用

<canvas id="gameCanvas" width="400" height="400">
</canvas>

赞(0）回复(0）举报 12个月前

6yjfywim2#

你的整条蛇都是用画布做的，因为你的画布是300x150
你必须通过属性来改变画布的宽度和高度
更改样式只会拉伸当前像素

const board_border = 'black';
const board_background = "white";
const snake_col = 'lightblue';
const snake_border = 'darkblue';

const snakeboard = document.getElementById('gameCanvas');
const snakeboard_ctx = gameCanvas.getContext('2d');

let snake = [{
  x: 200,
  y: 200
}, {
  x: 190,
  y: 200
}, {
  x: 180,
  y: 200
}, {
  x: 170,
  y: 200
}, {
  x: 160,
  y: 200
}]

main()

function main() {
  clearCanvas();
  drawSnake();
}

function clearCanvas() {
  snakeboard_ctx.fillStyle = board_background;
  snakeboard_ctx.strokestyle = board_border;
  snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
  snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
}

function drawSnake() {
  snake.forEach(drawSnakeparts);
}

function drawSnakeparts(snakePart) {
  snakeboard.fillStyle = snake_col;
  snakeboard.strokeStyle = snake_border;
  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

#gameCanvas {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<canvas id="gameCanvas" height="400" width="400"></canvas>

赞(0）回复(0）举报 12个月前

我来回答

html/css画布宽度/高度处理

2条答案

相关问题

热门标签

最新问答