Javascript 基本JS/HTML5画布问题_Javascript_Jquery_Html_Html5 Canvas

Javascript 基本JS/HTML5画布问题

javascript jquery html html5-canvas

Javascript 基本JS/HTML5画布问题,javascript,jquery,html,html5-canvas,Javascript,Jquery,Html,Html5 Canvas,我对使用HTML5的JS非常陌生，我无法获得一段非常基本的代码。我制作了画布，将其附加到主体上，并尝试编写文本，但没有显示任何内容 <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <title>Test Game</title> </head> <body>

我对使用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>


测试游戏
var CANVAS_WIDTH=480；
var CANVAS_HEIGHT=320；
var canvasElement=$（“”）；
var canvas=canvasElement.get（0.getContext（“2d”）；
canvasElement。附加到（“主体”）；
var FPS=30；
setInterval（函数（）{
更新（）；
draw（）；
}，1000/帧）；
函数更新（）{
}
函数绘图（）{
canvas.fillStyle=“#000”//将颜色设置为黑色
canvas.fillText（“Sup Bro！”，50,50）；
}

您以前没有包含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>


测试游戏
var CANVAS_WIDTH=480；
var CANVAS_HEIGHT=320；
变量canvasElement=$（“”）
.attr（'width'，CANVAS\u width）
.attr（‘高度’、画布高度）；
var canvas=canvasElement.get（0.getContext（“2d”）；
canvasElement。附加到（“主体”）；
var FPS=30；
setInterval（函数（）{
更新（）；
draw（）；
}，1000/帧）；
函数更新（）{
}
函数图（）{
canvas.fillStyle=“#000”//将颜色设置为黑色
canvas.fillText（“supbro！”，50,50）；
}

我也在学习HTML5。正如前面的人所说，您正在使用jQuery（$）而不包括库

另外，根据我所学到的，我认为最好使用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
    }
}

谢谢我在这方面真的是个新手，所以很高兴能有一个快速友好的回应@乔希：不客气。当你有时间的时候，如果你能看看这一页就好了。请注意，jQuery只是一个JavaScript库，它不是JavaScript本身的一部分。除了对于画布，您需要使用attr设置宽度和高度，或者只设置其css大小，这对画布不起作用：

.attr（'width'，canvas\u width）等等。您应该使用developertools（firefox中的firebug），然后您会看到类似“$不是函数”@AndreasBjørn在这里使用jquery创建新的dom元素并没有什么错误。@LJ_1102谢谢，删除了我的评论，以避免稍后给其他人带来混淆：）+1如果您正在执行动画requestAnimationFrame
比使用setInterval/setTimeout更有效，也更准确。