socket.io 기반 채팅 기능에서 jquery로 cavas 하여 말풍선 방식 채팅하기.

socket.io 로 다중 채팅 기능을 구현하였습니다.

그리고 canvas로 fillText 하여 메시지를 특정 위치에 띄울 수 있게 하였습니다.

(ps. 바람의나라 등 rpg 게임의 채팅 방식을 생각하시면 쉽습니다. )

이 두 가지를 연결하여 전송한 메시지를 특정 위치에 띄우고 싶은데요.

canvas 부분

var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000";
ctx.font = "20px Georgia";
ctx.fillText("안녕하세요!", 10, 20);
ctx.restore();

jquery 부분

<ul id="msg"></ul>
socket.on('message', function(msg) {
 $('#msg').append($('<li>').text(msg));
});

여기서 ctx.fillText() 메서드의 "안녕하세요!" 부분에 jquery 로 메시지를 전송하면 될 것 같은데 연결하는 방법을 모르겠네요...

  1. 조언 부탁드립니다.
  2. 방향이 이상하다면 수월한 방향으로 안내해주셔도 감사합니다.

1답변

  • 좋아요

    0

    싫어요
    채택취소하기

    canvas는 DOM처럼 객체로 보시면 안되고 그냥 칠판이라고 생각하셔야 합니다.
    칠판에 그린 그림을 고치려면 지우고 새로 그려야겠죠.

    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();
    });
    
    • canvas 개념에 대해 잘 몰라서 문제였네요. 감사합니다. 상남자 2016.5.10 16:28

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.