document.getElementById（）。getContext（'2d'）不是一个函数

这不断收到一个错误消息，说它不是一个函数，请帮助！document.getElementById（）。getContext（'2d'）不是一个函数

var ctx = document.getElementById('canvas').getContext('2d');

HTML：

<html> 
<head> 
    <title>Canvas Race</title> 
    <script src="jquery-2.2.3.js"></script> 
    <style type="text/css"> 
     canvas { 
      border: 1px solid black; 
      background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png"); 
      background-size: 200px 300px; 
      background-position-y: -81px; 
     } 
     </style> 
</head> 
<body> 

    <div id="canvas"> 
     <canvas id="myCanvas" width="1100" height="150" ></canvas> 
    </div> 
    <div id="winner"></div> 

</body> 
</html>

的Javascript：

<script type="text/javascript"> 
    var blueCar = new Image(); 
    var redCar = new Image(); 

    // images 
    function image(){ 
     blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg"; 
     redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png"; 
     window.requestAnimationFrame(draw); 
    } 
    function draw() { 
     var ctx = document.getElementById('canvas').getContext('2d'); 
     ctx.globalCompositeOperation = 'destination-over'; 

     //blue car 
     ctx.drawImage(blueCar, 10, 10, 100, 100); 
    } 
    image(); 

</script>

我已经搜查各地，但我还没有找到任何工作我不要;“知道，如果它有用我的jquery做任何事情。

来源

2016-05-12 Angel

你有一个canvas元素的id =“canvas”吗？ – ray

是的，我是否已将它全部设置好了 – Angel

在运行此代码时是否加载了您的文档？（如果您的脚本位于文档的头部，并且它不作为就绪处理程序的一部分运行，则您的画布元素尚不存在。） – ray

你引用了一个div使用该ID那里...... 的DIV没有属性方法，例如.getContext（），所以这里是工作的一部分：

var blueCar = new Image(); 
 
    var redCar = new Image(); 
 

 
    // images 
 
    function image(){ 
 
     blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg"; 
 
     redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png"; 
 
     window.requestAnimationFrame(draw); 
 
    } 
 
    function draw() { 
 
     var ctx = document.getElementById('canvas').getContext('2d'); 
 
     ctx.globalCompositeOperation = 'destination-over'; 
 

 
     //blue car 
 
     ctx.drawImage(blueCar, 10, 10, 100, 100); 
 
    } 
 
    image();

<html> 
 
<head> 
 
    <title>Canvas Race</title> 
 
    <script src="jquery-2.2.3.js"></script> 
 
    <style type="text/css"> 
 
     canvas { 
 
      border: 1px solid black; 
 
      background-image: url("http://www.gamefromscratch.com/image.axd?picture=road2048v2.png"); 
 
      background-size: 200px 300px; 
 
      background-position-y: -81px; 
 
     } 
 
     </style> 
 
</head> 
 
<body> 
 

 
    <div id="mycanvas"> 
 
     <canvas id="canvas" width="1100" height="150" ></canvas> 
 
    </div> 
 
    <div id="winner"></div> 
 

 
</body> 
 
</html>

来源

2016-05-13 03:21:34

谢谢我没有注意到ID的 – Angel

document.getElementById（）。getContext（'2d'）不是一个函数

回答

相关问题