socket.io 기반 채팅 기능에서 jquery로 cavas 하여 말풍선 방식 채팅하기.
조회수 2192회
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 답변
-
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(); });-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력