Как вставить текст внутри холста, используя функцию onclick кнопок? - PullRequest
Новая
       8

Как вставить текст внутри холста, используя функцию onclick кнопок?

0 голосов
/ 21 мая 2018

Как уже упоминалось в заголовке, я хочу иметь возможность вставлять текст из текстового поля внутрь холста с помощью функции нажатия кнопок.Теперь имейте в виду, что я новичок в этом, поэтому могут быть ошибки повсюду. 

function startGame() {
    myGameArea.start();
}
    
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        this.gravity = 0.05;
        this.gravitySpeed = 0;
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
            
        }
}
    
function myFunction() {
    
}
canvas { 
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myFunction()">Submit</button>
</body>

Ответы [ 2 ]

0 голосов
/ 21 мая 2018

С моей точки зрения, лучше хранить методы прямо под Вашим объектом myGameArea.Метод может быть вызван напрямую, и вам просто нужно get 2D context of canvas, затем fill it.

Требуемый пример кода, полный код ниже: 

<button onclick="myGameArea.myFunction()">Submit</button>

var myGameArea = {
...
    myFunction : function() {
        var txt=document.getElementById("Box");

        var ctx=this.canvas.getContext("2d");
        ctx.font="20px Georgia";
        ctx.fillText(txt.value, 10, 20);
    }
}


function startGame() {
    myGameArea.start();
}
    
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        this.gravity = 0.05;
        this.gravitySpeed = 0;
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        },
    myFunction : function() {
        var txt=document.getElementById("Box");

        var ctx=this.canvas.getContext("2d");
        ctx.font="20px Georgia";
        ctx.fillText(txt.value, 10, 20);
    }
}
canvas { 
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myGameArea.myFunction()">Submit</button>
</body>
0 голосов
/ 21 мая 2018

@ sosa123, проверьте ниже решение и дайте мне знать, это решение работает для вас или нет? 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function startGame() {
    myGameArea.start();
}

var myGameArea = {
    canvas : createElementOnDom('CANVAS','myCANVAS'),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        this.gravity = 0.05;
        this.gravitySpeed = 0;
        document.body.insertBefore(this.canvas,document.body.childNodes[0]);

        }
}

    function createElementOnDom (type,id) {
   var element=document.createElement(type);
   element.id=id;
   return element;
}
function myFunction() {
    var canvas = document.getElementById("myCANVAS");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText(document.getElementById("Box").value,10,50);
}
</script>
<style>
canvas { 
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<body onload="startGame()">
<input type="text" name="Box" id="Box" value="" placeholder="Write whatever"/>
<button onclick="myFunction()">Submit</button>
</body>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...