javascript canvas 中的 ctx 未定义

Question

我正在尝试写一些东西，使 cantor 集的不同迭代。我复制并删除了一些代码，但我不明白为什么会出现此未定义错误。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
</style>
</head>
<body onload="startGame()">

<script>
//var n=10;

function startGame() {
    sheet.start();
   
}

var sheet = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 726;
        this.canvas.height = 680;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}


    ctx = sheet.context;    
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(100,100);
    ctx.stroke();
    

</script>
</body>
</html>

但是我有一些非常相似的代码示例，它不会让我 post 因为它说它主要是代码。但是一些帮助将不胜感激，因为这个 ctx undefined 是一个我经常遇到的错误，我不太确定它是什么意思。我一直用它在 canvas 上画东西，从不关心自己了解它的含义。

Answer 1

简答

ctx 未定义，因为对象 sheet 没有属性调用的上下文。

因此ctx = sheet.context;会失败。

答案有点长

有

var sheet = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 726;
        this.canvas.height = 680;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

您正在声明一个具有两个属性的对象：canvas 和 start。一旦您在对象上调用 start() 函数，它就会尝试将其 canvas 属性的宽度设置为 726 - 问题是，sheet 不会调用它自己的属性 canvas 之前所以 document.createElement("canvas") 永远不会执行。

修复很简单：最初将 canvas 设置为 undefined，然后在开始函数中创建实际的 canvas 元素。尽管如此，您仍然没有上下文属性，因此也将其添加到 sheet 对象中。

这是一个例子：

var sheet = {
  canvas: undefined,
  context: undefined,
  start: function() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 200;
    this.canvas.height = 200;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

sheet.start();

var ctx = sheet.context;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

javascript canvas 中的 ctx 未定义

ctx in javascript canvas is undefined

html

javascript

canvas

html5-canvas

简答

答案有点长