HTML5의 canvas를 이용해서 마구 그리는데 역시나 작은 객체가 많고 프레임이 높아지면 번쩍번쩍한다.
그리하여 더블 버퍼링을 찾아보니까 역시나 동일함.
canvas를 view용, buffer용으로 2개 만들어서
buffer용 canvas에 자잘한 거 전부 그리고 막판에 실제로 보여질 view용 canvas에 한번에 그려버리면 OK.
<script>
document.onload = function(){
// view용 canvas
var cnvsView = document.getElementById('cnvs_view');
var ctxView = cnvsView.getContext('2d');
// buffer용 canvas
var cnvsBuffer = document.createElement('canvas');
var ctxBuffer = cnvsBuffer.getContext('2d');
ctxBuffer.canvas.width = cnvsView.width;
ctxBuffer.canvas.height = cnvsView.height;
// 더블 버퍼링
// 1. buffer용 canvas에 그리기
var img = new Image();
img.src = 'http://이미지파일경로';
ctxBuffer.drawImage(img, 0, 0);
// 그 외 자잘한 뭔가를 한다고 가정....
// 원래는 타이머 등으로 프레임을 정해서 마구 그리는 정도는 되어야 번쩍거림...
// 2. view용 canvas에 그리기
ctxView.drawImage(cnvsBuffer, 0, 0);
}
</script>
</head>
<body>
<canvas id="cnvs_view" width="640" height="480"></canvas>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| [HTML5] 모바일 웹브라우저에서 카메라 사진/동영상 찍기 (0) | 2015.02.14 |
|---|---|
| [HTML5] canvas의 마우스 이벤트 통과시키기 (0) | 2012.10.31 |
| [HTML5] Notifications (브라우저에 트위터앱처럼 push 기능구현) (0) | 2010.12.31 |
| [HTML5] Web Messaging (cross-domain messaging, channel messaging) (0) | 2010.12.31 |
| [HTML5] 저장가능한 그림판 (canvas, localStorage) (6) | 2010.12.30 |
