Use socket.io-based chat function to chat in a speech bubble manner by cavas to jquery.

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

2022-09-22 21:38

1 Answers

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();
});

2022-09-22 21:38

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656