Javascript画布中未显示的颜色_Javascript_Canvas_Colors

Javascript画布中未显示的颜色

javascript canvas colors

Javascript画布中未显示的颜色,javascript,canvas,colors,Javascript,Canvas,Colors,我一直在学习本教程：关于使用Javascript制作游戏。我想在我的网页上测试一下，但是画布没有颜色，尽管它应该有一个边框和一个黑色矩形。我不知道该怎么办，所以我希望有人能帮我修复这段代码，让它在我的网页上工作。代码： <!doctype html> <html> <body> <head> <canvas id = "canvas" width = "640" height = "480"> style = "border:1px

我一直在学习本教程：关于使用Javascript制作游戏。我想在我的网页上测试一下，但是画布没有颜色，尽管它应该有一个边框和一个黑色矩形。我不知道该怎么办，所以我希望有人能帮我修复这段代码，让它在我的网页上工作。代码：

<!doctype html>
<html>
<body>
<head>

<canvas id = "canvas" width = "640" height = "480">
style = "border:1px solid gray; width: 640px; height: 480px;">
</canvas>

<script>
var Context = {
    canvas : null,
    context : null,
    create: function(canvas_tag_id) {
        this.canvas = document.getElementById(canvas_tag_id);
        this.context = this.canvas.getContext('2d');
        return this.context;
    }

};

$(document.ready(function){


   Context.create("canvas");

   Context.context.beginPath(); 
   Context.context.rect(0, 0, 640, 480);
   Context.context.fillStyle = 'black';
   Context.context.fill();

   // Context.context.beginPath();



});
</head>
</script>
</body>
</html>


style=“边框：1px实心灰色；宽度：640px；高度：480px；”>
变量上下文={
画布：空，
上下文：null，
创建：函数（画布标记id）{
this.canvas=document.getElementById（canvas\u tag\u id）；
this.context=this.canvas.getContext（'2d'）；
返回这个.context；
}
};
$（document.ready（函数）{
上下文。创建（“画布”）；
Context.Context.beginPath（）；
Context.Context.rect（0,060480）；
Context.Context.fillStyle='black'；
Context.Context.fill（）；
//Context.Context.beginPath（）；
});

谢谢

嗯，我发现了6-7个不同的错误，其中大多数是糟糕的应答器叠置/位置问题，而且您的脚本中没有包含jQuery事件

这里是一个工作示例，尝试将其与代码进行比较，以了解错误所在

<!doctype html>
<html>

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body> 
  <canvas id = "canvas" width = "640" height = "480" style = "border:1px solid gray; width: 640px; height: 480px;">
  </canvas>

  <script>
    var Context = {
      canvas : null,
      context : null,
      create: function(canvas_tag_id) {
        this.canvas = document.getElementById(canvas_tag_id);
        this.context = this.canvas.getContext('2d'); 
        return this.context;
      }
    };

    $(document).ready(function() {
      Context.create("canvas");
      Context.context.beginPath();
      Context.context.rect(0, 0, 640, 480);
      Context.context.fillStyle = 'black';
      Context.context.fill();
    });
  </script>
</body>
</html>


变量上下文={
画布：空，
上下文：null，
创建：函数（画布标记id）{
this.canvas=document.getElementById（canvas\u tag\u id）；
this.context=this.canvas.getContext（'2d'）；
返回这个.context；
}
};
$（文档）.ready（函数（）{
上下文。创建（“画布”）；
Context.Context.beginPath（）；
Context.Context.rect（0,060480）；
Context.Context.fillStyle='black'；
Context.Context.fill（）；
});

嗯，我发现了6-7个不同的错误，其中大多数是错误的应答器叠置/位置问题，并且您的脚本中没有包含jQuery事件

这里是一个工作示例，尝试将其与代码进行比较，以了解错误所在

<!doctype html>
<html>

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body> 
  <canvas id = "canvas" width = "640" height = "480" style = "border:1px solid gray; width: 640px; height: 480px;">
  </canvas>

  <script>
    var Context = {
      canvas : null,
      context : null,
      create: function(canvas_tag_id) {
        this.canvas = document.getElementById(canvas_tag_id);
        this.context = this.canvas.getContext('2d'); 
        return this.context;
      }
    };

    $(document).ready(function() {
      Context.create("canvas");
      Context.context.beginPath();
      Context.context.rect(0, 0, 640, 480);
      Context.context.fillStyle = 'black';
      Context.context.fill();
    });
  </script>
</body>
</html>


变量上下文={
画布：空，
上下文：null，
创建：函数（画布标记id）{
this.canvas=document.getElementById（canvas\u tag\u id）；
this.context=this.canvas.getContext（'2d'）；
返回这个.context；
}
};
$（文档）.ready（函数（）{
上下文。创建（“画布”）；
Context.Context.beginPath（）；
Context.Context.rect（0,060480）；
Context.Context.fillStyle='black'；
Context.Context.fill（）；
});

非常感谢！现在效果很好！只需补充一点：如果您不打算使用jQuery，您可以像这样使用本机javascript来等待DOM加载：

window.onload=function（）{……您的javascript在这里……}

非常感谢！现在效果很好！只需补充一点：如果您不打算使用jQuery，您可以像这样使用本机javascript来等待DOM加载：

window.onload=function（）{……您的javascript在这里……}