Question

问题：

我的javascript中的canvas变量似乎没有检测到我的html文档中的canvas标记，我无法检测到问题的根源。

信息：

我有以下代码：

var canvas = document.querySelector('canvas');
console.log(canvas);

而且..

<!doctype HTML>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="./style.css">
      <script src="./code.js"></script>
      <title>Canvas Resize</title>
   </head><!-- head -->
   <body>
     <canvas></canvas>
   </body><!-- body -->
</html><!-- html -->

而且..

canvas {

  border: 1px solid black;
}

在执行上面的代码之前，所有内容都使用“console.log（”Hello World“）;”在js文件和“* {backgroud-color：blue;}”中进行了测试
忠实地应用了保存和刷新

我还做了一个测试，用一个字符串常量替换了变量的rvalue。然后，设置为变量的值显示在两个浏览器（Chrome和Firefox）的控制台中 - 而null则使用原始rvalue代码呈现（即：使用“document.querySelector（'canvas'）;”作为rvalue）。

请求：

有人能够发现这里出了什么问题吗？我错过了什么？

此处还可以看到问题的详细说明（带图片）：https://imgur.com/a/rIpVN

Answer 1

为画布指定一个类并使用document.getElementByClassName( Canvas Class Name)进行查询，然后通过控制台运行它。如果这不起作用，则将<script>标记放在<body>标记的底部，以使浏览器在运行js代码之前加载所有DOM对象。

为什么document.querySelector（）函数不能与html5代码一起使用？

1 个答案: