JavaScript 使 getContext() 公开？-6ren

JavaScript 使 getContext() 公开？

转载作者：行者123 更新时间：2023-12-02 19:42:16

27

4

我正在尝试获取 Canvas 的上下文，显然我收到错误Uncaught TypeError: Cannot call method 'getContext' of null

显然我在它初始化之前就得到了它？我该怎么办呢。如何公开我的 Canvas ，以便可以在其他函数中访问它并消除错误？

    var spawnX = 5;
    var spawnY = 7;
    var realSpawnX = spawnX*32;
    var realSpawnY = spawnY*32;
    var playerImg = new Image();
    var playerImgX = new Image();
    var currX = 5;
    var currY = 7;
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

window.onLoad = function() {

  loadGame();

};

// The map
function loadMap(map) {
  if (map == 1) {
    return [
[ 11, 1, 1, 1, 1, 1, 1, 190, 115, 1, 1, 1, 1, 1, 1, 2],
[ 190, 190, 190, 190, 190, 190, 190, 190, 13, 148, 148, 148, 148, 148, 121, 2],
[ 1, 520, 127, 127, 127, 127, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 167, 167, 167, 148, 343, 1],
[ 1, 520, 127, 166, 166, 166, 127, 13, 13, 148, 148, 148, 183, 148, 343, 1],
[ 1, 520, 364, 174, 127, 361, 127, 13, 13, 13, 13, 13, 13, 13, 13, 1],
[ 115, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 115],
[ 1, 514, 13, 13, 394, 343, 145, 220, 145, 145, 145, 13, 13, 13, 13, 1],
[ 1, 514, 13, 13, 343, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 514, 514, 13, 118, 118, 145, 166, 166, 166, 145, 13, 13, 13, 13, 1],
[ 1, 1, 1, 115, 1, 1, 145, 145, 145, 145, 145, 1, 1, 1, 1, 1]
];
    }
}

function loadGame(){
    // Load Game
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    var tiles = [];
    var board = loadMap(1);

    canvas.width = 512;
    canvas.height = 352;

    // Set up the tiles
for (x = 0; x <= 520; x++) {
    imageObj = new Image(); // new instance for each image
    imageObj.src = "line_tile/t"+x+".png";
    tiles.push(imageObj);
} 
var theX;
var theY;
// Draw the map by rows and cols
for (x = 0; x <= 10; x++) {
for (y = 0; y <= 15; y++) {

theX = x*32;
theY = y*32;
    //context.drawImage(tiles[board[x][y]], theY, theX,32,32);
    //console.log("Tile X: " + x + " | Tile Y: " + y + " - X Pos: " + theX + " | Y Pos: " + theY);
    }
    } 

    // DRAW THE PLAYER            
    spawnX = 5;
    spawnY = 7;
    realSpawnX = spawnX*32;
    realSpawnY = spawnY*32;
    currX = 5;
    currY = 7;
    playerImg.src = "me.gif";
    context.drawImage(playerImg, realSpawnY, realSpawnX,32,32);
    console.log("Player drawn at ("+spawnX+","+spawnY+") Real spawn: X: " +realSpawnX + " Y: " + realSpawnY);

}

// Pressing arrow keys 'moves' the player
$(document).keydown(function(e){
    if (e.keyCode == 37) { // LEFT ARROW
        currX = currX-1;
        console.log("New X:" + currX);
       return false;
    }
    if (e.keyCode == 39) { // RIGHT ARROW
        currX = currX+1;
        console.log("New X:" + currX);
       return false;
    }

    spawnX = 1;
    spawnY = 1;
    realSpawnX = spawnX*32;
    realSpawnY = spawnY*32;
    playerImgX.src = "me.gif";
    context.drawImage(playerImgX, realSpawnY, realSpawnX,32,32);
});

这是 HTML 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


    <title>Untitled 1</title>

    <script type="text/javascript" src="theGame.js"></script>
    <style type="text/css">
<!--
    #canvas {
       background:red;       
    }
-->
</style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
</html>

最佳答案

您应该等待初始化变量，直到页面加载完毕:

var canvas = null;
var context = null;

window.onload = function() {
    canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    loadGame();
};

关于JavaScript 使 getContext() 公开？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10256601/

27

4

0

文章推荐： PHP 只允许服务器访问 PHP 文件

文章推荐： javascript - 如何使 JS 对象在多个文件中可用

文章推荐： javascript - 就绪状态始终为 0

c# - 如何以编程方式将控件添加到表单中，公开？
例如 Form1 frm1 = new Form1(); TextBox tb = new TextBox(); frm1.Controls.Add(tb); 现在我不能说 f
Drupal 公开 View 过滤器自定义日期
我有一个日期过滤器，我已经在我的 View 中公开了它。我想让界面更加用户友好并加强它的外观。我不想选择日期，而是从以下选项中进行选择。最后一天上周去年全部然后，这将过滤日期字段。这可能吗？
WPF UserControl 公开 ActualWidth
如何向用户公开我的用户控件组件之一的 ActualWidth 属性？我找到了很多关于如何通过创建新的依赖属性和绑定(bind)来公开普通属性的示例，但没有关于如何公开像 ActualWidth 这样
github - 公开 Github 组织项目
Github 最近推出了项目功能。当项目处于 repo 级别时，如果 repo 本身是公开的，那么任何人都可以访问这些项目。但是，组织级别的项目仅对组织成员可见。例如，https://githu
javascript - 公开 Javascript 文件
我想要从我的网络服务器访问 JavaScript 文件。以便任何人都可以在其网站中访问和引用它。 e-g 假设 abcxyzserver.com 是我的网络服务器。 www.abcxyzserv
azure - 公开 Blob 存储并上传到其中
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
JavaScript 使 getContext() 公开？
我正在尝试获取 Canvas 的上下文，显然我收到错误Uncaught TypeError: Cannot call method 'getContext' of null 显然我在它初始化之前就得到
docker - 公开 Docker 镜像的所有端口
我正在对设置 HA 集群的解决方案进行故障排除。虽然我知道应用程序执行故障转移和故障回复所需的端口，但不知何故 dockerized 解决方案不起作用。我怀疑有一些我还不知道的端口。目前，我的 EX
kubernetes - Prometheus仪表板通过入口 Controller 公开
我试图在能够使用 Helm 运行的k8集群中设置Prometheus。当我使用外部IP将Prometheus-Server作为LoadBalancer服务公开时，访问仪表板。当我尝试将此服务配置为C
wcf - 公开 WCF 中现有的业务对象
我知道关于这个主题也有类似的问题，但我不完全确定他们正在解决同样的问题。所以要明确的是... 我有一个现有的类库，其中包含用于类型、业务逻辑和数据访问的命名空间。逻辑和数据访问命名空间中的类是静态的，
azure - 公开 Blob 存储并上传到其中
尝试使用curl命令上传到blob存储 curl --upload-file --url "https://.blob.core.windows.net//" 但不断收到“HTTP/1.1 404
docker - 公开 Nginx 容器并查看服务
1.)执行以下命令生成一个随机数，用于后面的步骤 NUMBER=$[ ( $RANDOM % 1000 ) + 1 ] echo $NUMBER 注意:将句子 your random number 替
c# - 公开 MVVM 中内置的用户控件的属性
类似这样的问题有很多，但仍然无法得到我真正想要的，而且它们都有一些与我不同的地方，那就是:我有一个 UserControl: 在名为UCProject 的类库项目中单独构建； UCProject 项目
c# - 公开 protected 字段的最佳方式
我有一个这样的基类: public class BaseModalCommand { protected object m_commandArgument; protected i
javascript - 公开 jQuery 插件属性
给定以下 JQuery 插件。是否可以将变量“元素”公开给插件外部的 javascript？如果是这样，这是怎么做到的？对于此插件外部的 javascript，访问“元素”的语法是什么？ (funct
java - 公开 jhipster 微服务客户端类
我有两个使用 jhipster 创建的微服务。 (ms1 和 ms2) 我使用 AuthorizedFeignClient 在两个微服务之间进行通信。 ms1 有一些 DTO 类，用作 REST AP
javascript - 公开 JavaScript 源映射有什么合法的安全问题吗？
我正在使用错误跟踪软件来报告网络浏览器中发生的任何错误，但我的生产站点上的代码已缩小。因此，调试几乎是不可能的(变量名被更改等)。我想将完整的源映射文件投入生产，以便我可以调试这些错误，但在这样做时
sql - Kotlin 公开 - 没有标识列的表的实体
我在 Kotlin 公开库中可以找到的所有 Material 都假定该表具有一个主标识列，因此在大多数示例中显示的实体继承了 IntEntity 抽象类。例如: class UserLocation(
Java:公开 protected 方法的简单方法
我有一个类 (Capsule)，它有很多 protected 方法 (30+)。这个想法是允许开发人员扩展此类并在类 (ImADev) 中使用 protected 方法，但将其留给开发人员将它们公开为
java - 公开 Tomcat 日志文件
Tomcat 日志位置是: /apache/apache-tomcat-8.0.15/logs 允许通过浏览器访问这些日志的标准方法是什么？为此启用 Tomcat 目录列表标准吗？最佳答案我曾在

首页

博学

6Ren·AI

商城

JavaScript 使 getContext() 公开？