펜의 크기, 색 등을 대강 지정하여 마우스로 canvas에 그림을 그릴 수 있는 그림판.
아래의 소스를 html 파일로 저장한 다음,
구글 크롬같은 canvas를 지원하는 브라우저에서 읽어들이면 그릴 수 있음.
(주의: event의 property를 무조건 크롬으로 해놔서 크롬만 제대로 작동함. 파폭 지원은 귀찮다...)
<!DOCTYPE html>
<html>
<head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
<script>
$(document).ready(function(){
// canvas
var cnvs = document.getElementById('cnvs');
// cavnas 있음
if (cnvs.getContext) {
// 캔버스 컨텍스트
var ctx = cnvs.getContext('2d');
// 그리기 모드인지 체크하는 변수
var isDraw = false;
// 그리기 옵션
var dot = 1;
var color = 'rgb(0, 0, 0)';
// 그리기 옵션 - 도트크기
$('#dot').bind('change', function(){ dot = $('#dot').val(); });
// 그리기 옵션 - 색깔
$('#color').bind('change', function(){ color = $('#color').val(); });
// 이벤트 핸들러 연결
cnvs.onmousemove = function(e){
// 그릴 수 있으면 그린다.
if (isDraw) draw(e);
}
cnvs.onmousedown = function(e){
// 왼쪽 버튼 down 이면 그릴 수 있다고 선언
if (e.button===0) {
isDraw = true;
draw(e);
}
}
cnvs.onmouseup = function(e){
// 버튼 up이면 그릴 수 없다고 선언
isDraw = false;
}
// 그리기
function draw(e)
{
ctx.fillStyle = color;
ctx.fillRect(e.offsetX, e.offsetY, dot, dot);
}
// canvas 없음
} else {
alert('canvas가 지원되지 않는 브라우저입니다. 구글 크롬을 권장합니다.');
return;
}
});
</script>
<title>paint</title>
</head>
<body>
<div>
<canvas id="cnvs" width="300" height="300" style="border: 1px solid black;"></canvas>
<br />
<div>
<!-- 도트크기 -->
<select id="dot">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="5">5px</option>
<option value="10">10px</option>
</select>
<!-- 색깔 -->
<select id="color">
<option value="rgb(0, 0, 0)">black</option>
<option value="rgb(255, 0, 0)">red</option>
<option value="rgb(0, 255, 0)">green</option>
<option value="rgb(0, 0, 255)">blue</option>
<option value="rgb(255, 255, 0)">yellow</option>
<option value="rgb(255, 255, 255)">white</option>
</select>
</div>
</div>
</body>
</html>
<html>
<head>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
<script>
$(document).ready(function(){
// canvas
var cnvs = document.getElementById('cnvs');
// cavnas 있음
if (cnvs.getContext) {
// 캔버스 컨텍스트
var ctx = cnvs.getContext('2d');
// 그리기 모드인지 체크하는 변수
var isDraw = false;
// 그리기 옵션
var dot = 1;
var color = 'rgb(0, 0, 0)';
// 그리기 옵션 - 도트크기
$('#dot').bind('change', function(){ dot = $('#dot').val(); });
// 그리기 옵션 - 색깔
$('#color').bind('change', function(){ color = $('#color').val(); });
// 이벤트 핸들러 연결
cnvs.onmousemove = function(e){
// 그릴 수 있으면 그린다.
if (isDraw) draw(e);
}
cnvs.onmousedown = function(e){
// 왼쪽 버튼 down 이면 그릴 수 있다고 선언
if (e.button===0) {
isDraw = true;
draw(e);
}
}
cnvs.onmouseup = function(e){
// 버튼 up이면 그릴 수 없다고 선언
isDraw = false;
}
// 그리기
function draw(e)
{
ctx.fillStyle = color;
ctx.fillRect(e.offsetX, e.offsetY, dot, dot);
}
// canvas 없음
} else {
alert('canvas가 지원되지 않는 브라우저입니다. 구글 크롬을 권장합니다.');
return;
}
});
</script>
<title>paint</title>
</head>
<body>
<div>
<canvas id="cnvs" width="300" height="300" style="border: 1px solid black;"></canvas>
<br />
<div>
<!-- 도트크기 -->
<select id="dot">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="5">5px</option>
<option value="10">10px</option>
</select>
<!-- 색깔 -->
<select id="color">
<option value="rgb(0, 0, 0)">black</option>
<option value="rgb(255, 0, 0)">red</option>
<option value="rgb(0, 255, 0)">green</option>
<option value="rgb(0, 0, 255)">blue</option>
<option value="rgb(255, 255, 0)">yellow</option>
<option value="rgb(255, 255, 255)">white</option>
</select>
</div>
</div>
</body>
</html>
'HTML/CSS' 카테고리의 다른 글
| [HTML5] WebWorkers (0) | 2010.12.29 |
|---|---|
| [HTML5] canvas 지우기 (clear canvas) (2) | 2010.12.29 |
| [HTML5] WebSocket 서버의 handshake (0) | 2010.12.02 |
| [HTML5] WebSocket 서버 순서도 (0) | 2010.12.02 |
| [HTML5] 2D Context tutorial (이미지) (0) | 2010.02.26 |
