Как на canvas добавить form с элементами?

270

06 мая 2017, 22:37

Делаю игру наподобие BrowserQuest. Застрял на форме регистрации игрока. Собственно сабж, как ее реализовать для canvas?

    <html>
        <body>
            <canvas id="canvas1" width="1200" height="800"></canvas>    
        </body>
        <script>
         var canvas = document.getElementById("gameCanvas");
         var ctx = canvas.getContext("2d");
....
        </script>
    </html>

Как в ctx можно добавить форму..логин..пароль и т.д.? Пытаюсь таким образом:

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");
//create input element
var i = document.createElement("input");
i.type = "text";
i.name = "user_name";
i.id = "user_name1";
//create a checkbox
var c = document.createElement("input");
c.type = "checkbox";
c.id = "checkbox1";
c.name = "check1";
//create a button
var s = document.createElement("input");
s.type = "submit";
s.value = "Submit";
// add all elements to the form
f.appendChild(i);
f.appendChild(c);
f.appendChild(s);
canvas.appendChild(f); //pure javascript

Отдельно страничка регистрации не пойдет, так как игрок попадает в игру.

Сначала с именем как "unknown". Затем должна появляться форма регистрации/авторизации.

Answer 1

canvas рисует лишь графику, поэтому если вы хотите форму авторизации в игре, вы либо ее рисуете, либо как вариант полегче (намного): поверх canvas отобразить блок с формой авторизации, как обычный html