Question

我遇到了这个问题，画布没有写入浏览器，我正在按照w3schools教程来构建基本游戏。

我想知道为什么在块样式标签中放置画布时，body-block没有增长。 javascript是一个外部文件，canvas标记的尺寸在那里指定。

应该有CSS调用的线程和HTML / Javascript调用的线程，这个代码在哪里以及为什么没有为我的画布定义块？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
 <body>
   <style>
     canvas {
       border:1px solid #d3d3d3;
       background-color: #f1f1f1;
   }
   </style>
  <script type="text/javascript" src="/Users/cgoodwin/game/g.js">
   window.onload = start;
  </script>
 </body>
</html>

以上是HTML文档

以下是JS

    function start(){

      gameArea.start();

      }

var gameArea={

 canvas:document.createElement("canvas"),

 start:function(){
  this.canvas.width=480;
  this.canvas.height=270;
  this.context=this.canvas.getContext("2d");
  document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  this.interval=setInterval(update,20);
  },
    clear:function(){
     this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
    }
}

var gamePiece;
function start(){
 gameArea.start();
 gamePiece=new component(30,30,"red",10,120);
}

 function component(width,height,color,x,y){
  this.width=width;
  this.height=height;
  this.x=x;
  this.y=y;
   this.update=function(){
    ctx=gameArea.context;
    ctx.fillStyle=color;
    ctx.fillRect(this.x,this.y,this.width,this.height);
 }
}

function updateGameArea(){
 gameArea.clear();
 gamePiece.x += 1;
 gamePiece.update();
}

我在gamePiece上添加了一个“Watch Expression”和开发者工具，它说它没有定义。可能，这是我的问题，但为什么不定义？可能是游戏更新会在任何给定的实例中触发它未定义，在评估每20毫秒清除和更改的内容时添加一个监视可能不起作用。

Answer 1

为什么这段代码没有为我的画布定义一个块？

因为你没有画布。

<script>元素可以用两种方式一种加载JavaScript。

通过src属性
通过JS放置在开始和结束标记之间

这是你的代码：

<script type="text/javascript" src="/Users/cgoodwin/game/g.js">
   window.onload = start;
</script>

由于脚本是通过src属性加载的，因此window.onload = start 被忽略。

由于您从未致电start，因此<canvas>元素永远不会添加到DOM中。

移动你的第二个脚本，使其成为：

g.js
在其自己的<script>元素中

为什么在通过样式标记完成时不将画布放在浏览器中？

1 个答案: