2014-11-23 4 views
1

Я пытаюсь нарисовать Холст с использованием JavaScript ... но он не работает. Может ли кто-нибудь помочь мне в этом? ..I'm пытается построить Flappy птица с HTML 5 и JavaScript .. но этот код не работает ..Draw Canvas не работает

Pastebin Код: http://pastebin.com/uEXVx89k

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta name="mobile-web-app-capable" content="yes"> 

    <title>FlappyJS</title> 

    <script src="sprite.js"></script> 

    <style> 
    canvas { 
     display: block; 
     position: absolute; 
     margin: auto; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
    } 
    </style> 
</head> 
<body> 
<script type="text/javascript" src="sprite.js"></script> 
<script> 

var canvas, 
ctx, 
width, 
height, 

frames = 0, 
score = 0, 
best = 0, 

currentstate, 
states = { 

    Splash:0 , Game: 1 ,Score:2 
}, 

bird = {}, 
pipes = {}; 

function main(){ 

    canvas  = document.createElement("canvas"); 
    width  = window.innerWidth; 
    heigth  = window.innerHeight; 


     if (width >= 500) { 
      width = 320; 
      heigth = 480; 
      canvas.style.border = "1px solid #000"; 
     } 

     canvas.width = width; 
     canvas.height = height; 
     ctx = canvas.getContext("2d"); 

     document.body.appendChild(canvas); 



} 

function run(){ 

} 
function update(){ 

} 
function render(){ 


} 

main(); 

</script> 
</body> 
</html> 

Примечание: Я Noob в JavaScript.

мне нужно рисовать холст как изображение enter image description here

ответ

0

Вот рабочий JSFiddle: http://jsfiddle.net/jwmnvn04/

У вас есть опечатка.

Сначала вы объявляете это следующим образом:

heigth  = window.innerHeight; 

, а затем (по-прежнему правильно, я предполагаю, что, несмотря написано неправильно для контекста):

heigth = 480; 

, но тогда, когда вы называете его, чтобы определить высоту холста вы его правильно произнесли:

+0

heigth = window.innerHeight; – vdj4y

+0

Да, но тогда: canvas.height = height; – Alex

+0

Большое спасибо: D: D @Alex –