个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
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/
28
4
0
我开始学习WebGL，因为我找到了一些旧教程，我不知道在2014年什么是正确的方法？ 我启动了 (基本)，并且在教程中他们说了类似的话: use getContext('2d') and if yo
我的 fragment 中多次需要上下文: ... account.restore(getContext()); ... dbHelper = new DBHelper
尝试根据 Youtube 上的教程创建 HTML5 Canvas 时钟时。我按照说明进行了整个演示，但无法在自己的浏览器(Safari 8.0.7 和 FireFox 39.0.3)上查看时钟，它显示
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceS
我是 android/java 编程新手，遇到错误，提示无法解析符号getContext，我正在尝试从我的应用程序获取图片以保存到手机主要外部存储上的照片库。如果有人可以帮助我解决这个错误，我将非常感
我是 android/java 编程新手，并且遇到错误，提示符号 getContext 无法解析。该系统以Activity启动，有两个fragment。第一个是显示 Rest Api 的按钮。请帮忙
typedef struct _ut_slot { ucontext_t uc; .... }*ut_slot; static ut_slot* table; //array of t
我有扩展 recyclerview.adapter 的适配器类，我需要在此类中使用以下代码，但它在“this”上有错误。 public void addItems(int howMany){
我正在使用常规 JS(我知道这不是最好的，但我是初学者) 所以我正在为 Canvas 项目编写代码。然而，当使用 getContext() 函数时，JS 控制台会显示 Uncaught TypeErr
我知道使用上述 API 对于普通的基于 x86 的桌面系统是安全的，但对于使用 ARM 或 MIP 的嵌入式系统，某些不常用的 API 可能会得到较少的支持或错误的实现。在一个程序中包含这样的高级 A
所以我一直在官方网站上接受 Android 开发人员培训，他们希望我们最终实例化我们的数据库。 所以他们告诉我们使用这段代码: FeedReaderDbHelper mDbHelper = new F
在我的 Android 应用程序中，我正在使用标准的 Android 登录模板构建登录屏幕。在此代码模板中， Activity 中有一个名为 UserLoginTask 的类。如果用户成功登录，我想将
我正在使用 Canvas 制作一个基本的 Web 应用程序，它会在窗口调整大小时动态更改 Canvas 大小。我已经让它静态地工作，没有任何缺陷，但是当我创建一个对象使其动态地工作时，它会抛出一个错误
在 AndroidX 中， InstrumentationRegistry 现在已被弃用。 documentation状态 This method is deprecated. In most sce
我正在尝试在Spring Boot应用程序中使用Spring Security添加Facebook授权。目前，我的问题是从Principal提取数据。 这是我的安全配置: public class S
我正在尝试获取 Canvas 的上下文，显然我收到错误Uncaught TypeError: Cannot call method 'getContext' of null 显然我在它初始化之前就得到
我是Kotlin Coroutines的新手，我想以异步方式为我的每位员工调用API。但是我遇到了一个问题，即新协程的存在，我无法从SecurityContextHolder.getContext检索
最近我将 struts2 版本从 2.0.11 更新到了当前的 2.2.3。不幸的是，我现在遇到了一些奇怪的问题，到目前为止我还无法解决。 当我尝试获取 ActionContext 时: Action
我想要一个 ActorFactory 类，如下所示 public class SampleActorFactory { // Simple create method public creat
我尝试对用户进行身份验证(它有效)并从上下文中获取用户 token ，但它不起作用。 我有一个简单的微服务应用程序作为我的宠物项目，并使用 WebFlux 作为网络框架。我尝试调试 ReactiveS
我是一名优秀的程序员,十分优秀！