Question

我对使用HTML5的JS非常陌生，我无法获得一段非常基本的代码。我制作了画布，将它附加到身体上，并尝试写文字，但没有任何显示。

 <!doctype html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>Test Game</title>
    </head>
    <body>
        <script type="text/javascript">
            var CANVAS_WIDTH=480;
            var CANVAS_HEIGHT=320;
            var canvasElement=$("<canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'></canvas>");
            var canvas = canvasElement.get(0).getContext("2d");
            canvasElement.appendTo('body');
        </script>
        <script type="text/javascript">
            var FPS = 30;
            setInterval(function(){
                update();
                draw();
            },1000/FPS);
            function update(){

            }
            function draw(){
                canvas.fillStyle = "#000";//Sets colour to black
                canvas.fillText("Sup Bro!",50,50);
            }
        </script>
    </body>
</html>

Answer 1

之前没有包含jQuery核心脚本，这就是它失败的原因。另外，我建议使用jQuery函数来添加属性，而不是使用字符串。

<!doctype html>
<html lang="en">
    <head>
        <meta charset='utf-8'>
        <title>Test Game</title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            var CANVAS_WIDTH = 480;
            var CANVAS_HEIGHT = 320;
            var canvasElement = $("<canvas>")
                .attr('width', CANVAS_WIDTH)
                .attr('height', CANVAS_HEIGHT);

            var canvas = canvasElement.get(0).getContext("2d");
            canvasElement.appendTo('body');

            var FPS = 30;
            setInterval(function () {
                update();
                draw();
            }, 1000/FPS);
            function update () {
            }
            function draw () {
                canvas.fillStyle = "#000"; // Sets colour to black
                canvas.fillText("Sup Bro!", 50, 50);
            }
        </script>
    </body>
</html>

Answer 2

我也在学习HTML5。就像上一个人说的那样，你使用jQuery（$）而不包括库。

另外，根据我所学到的，我认为最好使用requestAnimationFrame（https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame）而不是setInterval。如果你想设置FPS，可以在绘制循环中放置一个条件来检查是否是绘制下一帧的时间。

function draw(timestamp) {
    requestAnimationFrame(draw);
    if (timestamp - lasttimestamp > 1000 / framerate) {
        lasttimestamp = timestamp - ((timestamp - lasttimestamp) % 1000 / framerate;
        // ... put your drawing code in here
    }
}

基本的JS / HTML5画布问题

2 个答案: