Implemented multi-chat functionality with socket.io.
And I made it possible to upload the message to a specific location by using canvas fillText.
(ps. It's easy if you think about the chat method of the RPG game, such as the Kingdom of the Winds). )
I'd like to connect these two and put the transmitted message in a specific location.
Canvas part
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.font = "20px Georgia";
ctx.fillText ("Hello!", 10, 20);
ctx.restore();
jquery part
<ul id="msg"></ul>
socket.on('message', function(msg) {
$('#msg').append($('<li>').text(msg));
});
Here, CTx.I think I can send a message to jquery in the "Hello!" part of the fillText() method, but I don't know how to connect...
socket.io jquery canvas html5
Canvas should not be viewed as an object like DOM, but as a blackboard.
If you're going to fix a painting on the blackboard, you have to erase it and paint it again.
socket.on('message', function(msg) {
$('#msg').append($('<li>').text(msg));
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#000";
ctx.font = "20px Georgia";
ctx.fillText(msg, 10, 20);
ctx.restore();
});
© 2024 OneMinuteCode. All rights reserved.