javascript - 绘制 Canvas 不工作

标签 javascript html canvas html5-canvas

I'm trying to Draw a Canvas using JavaScript ... but it's not working .. Can anybody help me on this? ..I'm trying to Build a Flappy bird with HTML 5 and JavaScript .. but this Code is not Working ..

Pastebin Code: 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>

Note: I'm a Noob in JavaScript .

我需要绘制一个 Canvas ,如图 enter image description here

最佳答案

这是一个正在运行的 JSFiddle:http://jsfiddle.net/jwmnvn04/

您有一个拼写错误。

首先你这样声明:

heigth      = window.innerHeight; 

然后(我猜仍然正确,尽管上下文拼写错误):

  heigth = 480;

但是当你调用它来确定 Canvas 的高度时,你可以正确拼写它:

  canvas.height   = height;

关于javascript - 绘制 Canvas 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27088485/

相关文章:

javascript - 停止重定向直到函数返回(Angular/HTML)

javascript - 如何禁用滚动到某些 anchor ?

javascript - 将鼠标置于 Canvas 上移动图像的中心

javascript - 不明白为什么我收到未定义的错误

javascript - JQuery,如何按字母顺序重新排序 dom 元素?

javascript - AngularJs - 在点击时添加事件类的最佳实践(ng-repeat)

javascript - 单击子菜单会弹出 WordPress 插件中的模式

php - 如何将 GET 添加到 <a href> 标签?

javascript - 谷歌浏览器框架和大 Canvas

javascript - 身份验证 header 无法正常工作 ajax 401 未经授权