Question

我正在尝试使用JavaScript绘制 Canvas ...但它无法正常工作..有人可以帮助我吗？ ..我试图使用HTML 5和JavaScript构建Flappy鸟..但是这段代码不起作用..

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>

注意：我是JavaScript中的Noob。

我需要像图像 enter image description here

那样绘制画布

Answer 1

这是一个有效的JSFiddle：http://jsfiddle.net/jwmnvn04/

你有一个错字。

首先你这样声明：

heigth      = window.innerHeight;

然后（尽管上下文拼写错误，但仍然正确）：

  heigth = 480;

但是当你调用它来确定画布的高度时，你可以拼写它：

  canvas.height   = height;

Draw Canvas不起作用

1 个答案: