JavaScript/2011년스터디/CanvasPaint: Difference between revisions

Revision as of 16:05, 17 August 2011

소스를 올려주세요
김태진

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            var flag=false;
            var element;
            var ctx;
            var color=3,drawmethod=1;
            var dotx,doty;
            var temp;
            
        function draw()
        {	
            if(ctx && flag){
                ctx.beginPath();
                drawColor();
                if(drawmethod==1) drawLines();
                else if(drawmethod==2) drawDotPoint();
            }
        }
            
            function hold()
            {
                flag=true;
                
                element=document.getElementById('drawLine');
                ctx=element.getContext('2d');
                
                draw();
            }
            function release()
            {
                ctx.closePath();
                flag=false;
            }


//            var draw=new array();
//            draw.color=a;
//            draw.color();
//            
            function selectColor(temp)
            {
                color=temp;
            }
            function drawMethod(temp)
            {
                drawmethod=temp;
            }
            
            
            function drawColor()
            {
                switch(color){
                    case 0:
                    ctx.fillStyle="rgb(255, 255, 255)";
                    ctx.strokeStyle="rgb(255, 255, 255)";
                    break;
                    case 1:
                    ctx.fillStyle="rgb(5, 5, 230)";
                    ctx.strokeStyle="rgb(5, 5, 230)";
                    break;
                    case 2:
                    ctx.fillStyle="rgb(230, 5, 5)";
                    ctx.strokeStyle="rgb(255, 0, 0)";
                    break;
                    case 3:
                    ctx.fillStyle="rgb(0, 0, 0)";
                    ctx.strokeStyle="rgb(0, 0, 0)";
                }

            }
            function drawDotPoint()
            {
                ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
                ctx.fill();
            }
            function drawLines()
            {
                if(ctx && flag){
                    ctx.beginPath();
                    ctx.lineWidth=3;
                    ctx.moveTo(dotx-7, doty-7);
                    ctx.lineTo(event.x-7, event.y-7);
                    dotx=event.x;
                    doty=event.y;

                    //ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
                    //ctx.fillStyle="rgb(255, 0, 0)";
                    //ctx.fill();
                    ctx.stroke();
                    return 0;
                }
                
            }
            </script>
    </head>
    <body>

        <canvas id="drawLine" width="300" height="300" onmousedown="hold();" 
            onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
        <button type="button" onclick="selectColor(3)"> Black </button>        
        <button type="button" onclick="selectColor(2)"> Red </button>
        <button type="button" onclick="selectColor(1)"> Blue </button>
        <button type="button" onclick="selectColor(0)"> White(Eraser) </button>
        <button type="button" onclick="drawMethod(1)"> LINE </button>
        <button type="button" onclick="drawMethod(2)"> DOT </button>        
        <script>
            element=document.getElementById("drawLine");
            element.setAttribute("width", window.innerWidth-15);
            element.setAttribute("height", window.innerHeight-50);
            context=element.getContext('2d');
            context.strokeRect(0, 0, window.innerWidth-15, window.innerHeight-50);
            </script>
    </body>
</html>
JavaScript/2011년스터디