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. 방향이 이상하다면 수월한 방향으로 안내해주셔도 감사합니다.
  • 2016년 05월 08일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 282


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     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close