티스토리 뷰

프로그래밍/HTML5

HTML5 Canvas를 이용한 간단한 그림판 만들기.

쇠주는참이슬 2012. 3. 21. 16:12


간단하게 만든 그림판.
설명이 뭐가 필요하리.
주석이 최고의 설명!!!


<!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>
        &nbsp;
        <!-- 색깔 -->
        <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>






'프로그래밍 > HTML5' 카테고리의 다른 글

Drag & Drop (드래그 앤 드롭)(2)  (0) 2012.03.22
Drag & Drop (드래그 앤 드롭)(1)  (0) 2012.03.22
스토리지 (Storage) sessionStorage, localStorage  (0) 2012.03.22
1. HTML5를 이용한 간단한 웹폼화면 만들기  (0) 2012.03.20
HTML5 태그를 익스플로러에서 인식시키기 위한 방법  (0) 2012.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함