Основная проблема холста JS / HTML5

0

Я очень новичок в JS с HTML5, и я не могу получить очень простой код для работы. Я сделал холст, приложил его к телу и попытался написать текст, но ничего не появилось.

 <!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>
  • 0
    Вы должны использовать developertools (firebug в firefox), тогда вы бы увидели что-то вроде "$ is not function" ... @AndreasBjørn AndreasBjørn Нет ничего плохого в использовании jquery для создания нового элемента dom.
  • 0
    @LJ_1102 LJ_1102 Спасибо, удалил мой комментарий, чтобы потом не путаться с другими :)
Теги:
html5-canvas

2 ответа

6
Лучший ответ

Раньше я не использовал основной сценарий 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>
Поделиться
  • 0
    Спасибо! Я действительно такой новичок в этом, так что приятно иметь быстрый дружеский ответ!
  • 0
    @ Джош: пожалуйста. Если у вас есть время, было бы хорошо, если бы вы заглянули на страницу « О нас» . Обратите внимание, что jQuery - это просто библиотека для JavaScript, она не является частью самого JavaScript.
Показать ещё 2 комментария
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
    }
}
Поделиться
  • 0
    +1 Если вы делаете анимацию, requestAnimationFrame гораздо более эффективен, чем использование setInterval / setTimeout, а также более точен.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню