2017-02-22 304 views
2

我一直在关注如何制作简单画布的教程。但是,即使我完全按照教程操作,画布仍不会以任何颜色显示。任何帮助。其窃听我:/html canvas不填充颜色

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

编辑:感谢您的帮助。解决了!

+0

您的混合'canvas'和'Canvas'。在js案件事宜 – llamerr

+0

这个问题如何得到票?一个有错误的代码如何能对某人有帮助? –

+0

随时标记帮助你的答案正确的答案 – Yannjoel

回答

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> 
+0

这就是为什么我得到否定票? –

3

你已经做了两个错误

  • 您在混合canavsCanvas

  • 你已经写了getContext有没有资本c


不要忘了变量和方法名在JavaScript中是casesensitve。

因此canavas不是与Canavs相同的变量,而getcontext('2d')getContext('2d')不是同一个方法。


继承人小提琴中,我已经改正了错误:

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); 
 

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