Question

我一直在关注如何制作简单画布的教程。但是，即使我完全按照教程，画布也不会以任何颜色显示。任何帮助。它困扰我：/

<html>

some text here

<canvas id="gamecanvas" width="800" height="600></canvas>]

<script>
var Canvas;
var canvasContext;

window.onload = function() {
   console.log("Hello world!");
   Canvas = document.getElementById("gamecanvas");
   canvasContext = canvas.getcontext('2d');
   canvasContext.fillStyle = 'red';
   canvasContext.fillRect(0,0,canvas.width,canvas.height);
 }     
 </script>
 </html>

编辑：感谢您的帮助。解决！

Answer 1

你犯了两个错误

您正在混合canavs和Canvas
您已使用非资本getContext

c

不要忘记变量和方法名称在JavaScript中是casesensit。

因此canavas与Canavs不同，getcontext('2d')与getContext('2d')的方法不同。

这是我纠正错误的小提琴：

＆＃13;

var canvas;
var canvasContext;

window.onload = function() {
  console.log("Hello world!");
  canvas = document.getElementById("gamecanvas");
  canvasContext = canvas.getContext('2d');
  canvasContext.fillStyle = 'red';
  canvasContext.fillRect(0,0,canvas.width,canvas.height);

}

＆＃13;

some text here
<canvas id="gamecanvas" width="800" height="600"></canvas>

＆＃13;

Answer 2

语法错误太多。

这是有效的

<html>

some text here

<canvas id="gamecanvas" width="800" height="600"></canvas>

    <script>
    var Canvas;
    var canvasContext;

    window.onload = function() {
      console.log("Hello world!");
      Canvas = document.getElementById("gamecanvas");
      canvasContext = Canvas.getContext('2d');
      canvasContext.fillStyle = 'red';
      canvasContext.fillRect(0,0,Canvas.width,Canvas.height);

    }     
    </script>
</html>

html画布没有填充颜色

2 个答案: