javascript画布中的ctx未定义_Javascript_Html_Canvas_Html5 Canvas

javascript画布中的ctx未定义

javascript html canvas html5-canvas

javascript画布中的ctx未定义,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我正试图写一些东西，使康托集合的不同迭代。我复制并删除了我的一些代码，我不明白为什么会出现这个未定义的错误 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d

我正试图写一些东西，使康托集合的不同迭代。我复制并删除了我的一些代码，我不明白为什么会出现这个未定义的错误

<!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>


帆布{
边框：1px实心#D3；
背景色：#f1f1；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
}
//var n=10；
函数startName（）{
sheet.start（）；
}
变量表={
画布：document.createElement（“画布”），
开始：函数（）{
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（100100）；
ctx.stroke（）；

但我有一个非常类似的代码示例，它不会让我发布，因为它说它主要是代码。但是一些帮助将是感激的，因为这个ctx未定义是一个错误，我得到了很多，我真的不知道这意味着什么。我一直用它在画布上画东西，从不关心它的含义。

简短回答 ctx未定义，因为对象

工作表没有名为context的属性
因此ctx=sheet.context将失败
回答再长一点
与
您正在声明一个具有两个属性的对象：canvas
和start
。只要您在对象上调用start（）函数，它就会尝试将其canvas属性的宽度设置为726-问题是，sheet在调用它自己的属性canvas之前不会调用它自己的属性canvas，所以document.createElement（“canvas”）
永远不会执行
修复方法很简单：首先将canvas设置为undefined
，然后在start函数中创建实际的canvas元素。尽管如此，您仍然没有上下文属性，因此也将其添加到图纸对象中
下面是一个例子：

var表={
画布：未定义，
上下文：未定义，
开始：函数（）{
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（100100）；
ctx.stroke（）你需要向我们展示你的代码，我们不能通过读心术来调试它。它不允许我发布它，因为它说它主要是代码
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]);
    }
}