Question

好的，我正在使用HTML5和JavaScript开展项目。我试图调整画布大小，但它不会起作用。不过，我不认为它是我的浏览器，因为我使用的是最新版本的FireFox。我已经研究过这个问题了一段时间，我相信我能正确地做到这一点。所以，我不知道为什么它不会工作。这是我的代码：

var level = 1;
var levelImg = undefined;
var width = 0;
var height = 0;

var cnvs = document.getElementById("cnvs").getContext("2d");

width = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;

height = window.innerHeight
    || document.documentElement.cleintHeight
    || document.body.cleintHeight;

cnvs.width = width;
cnvs.height = height;

window.onload = function Init(){

    levelImg = document.getElementById("level" + level);

    setInterval("Draw()", 3);

}

function Draw(){

    //Clear the Screen
    cnvs.clearRect(0, 0, width, height);

    //Draw stuff
    DrawLevel();

}

function DrawLevel(){
    cnvs.fillRect(0, 0, 10, 10);
}

感谢任何帮助。感谢。

Answer 1

首先纠正代码中的所有拼写错误。使用浏览器控制台检测错误。

画布与上下文之间的区别

var cnvs = document.getElementById("cnvs").getContext("2d");

cnvs变量不是画布，而是画布的context。 Canvas是元素，context是用于在画布中编写的对象。要访问画布，您需要执行以下操作：

var canvas = document.getElementById("cnvs");
var cnvs = canvas.getContext('2d'); //context

现在，当您尝试更改画布时，使用画布，而不是cnvs。

canvas.width = width;
canvas.height = height;

SetInterval需要一个函数和一个表示毫秒的数字值。 "Draw()"是一个字符串，而不是一个函数，每次浏览器在画布上绘制时，3都是一个非常小的数字。它有效，但效率很低。

关于setInterval的其他观点。请改用requestAnimationFrame()来避免它。看看这里：setTimeout or setInterval or requestAnimationFrame

定义var levelImg = undefined没有效用。它可以由var levelImg;

替换

我无法在JavaScript

1 个答案:

画布与上下文之间的区别