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

Revision as of 10:24, 17 August 2011

소스를 올려주세요
김태진

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            var flag=false;
            var element;
            var ctx;
            var color=3;
            var firstdotx,firstdoty;
            var seconddotx,seconddoty;
            var dottab=1;
            var temp;
            function hold()
            {
                flag=true;
                
                element=document.getElementById('drawLine');
                ctx=element.getContext('2d');
                
                draw();
            }
            function release()
            {
                flag=false;
            }
            function draw()
            {	
                if(ctx && flag){
                    ctx.beginPath();
                    switch(color){
                        case 0:
                            ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);
                            ctx.fillStyle="rgb(255, 255, 255)";
                        break;
                        case 1:
                            ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
                            ctx.fillStyle="rgb(5, 5, 230)";
                        break;
                        case 2:
                            ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
                            ctx.fillStyle="rgb(230, 5, 5)";
                        break;
                        case 3:
                            ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
                            ctx.fillStyle="rgb(0, 0, 0)";
                    }
                    ctx.fill();
                }
            }
            function Color(temp)
            {
                color=temp;
            }
            function line()
            {

                if(ctx && flag){
                    if(dottab==1){

                        ctx.beginPath();
                        firstdotx=event.x;
                        firstdoty=event.y;
                        ctx.lineWidth=3;
                        ctx.moveTo(seconddotx-7, seconddoty-7);
                        ctx.lineTo(firstdotx-7, firstdoty-7);

                        //ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
                        //ctx.fillStyle="rgb(0, 0, 0)";
                        //ctx.fill();
                        ctx.stroke();
                        //dottab=2;
                        return 0;
                    }
                    else if(dottab==2){
                        ctx.beginPath();
                        seconddotx=event.x;
                        seconddoty=event.y;
                        ctx.lineWidth=3;
                        ctx.moveTo(firstdotx-7, firstdoty-7);
                        ctx.lineTo(seconddotx-7, seconddoty-7);
                        //ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*0.1, false);
                        //ctx.fillStyle="rgb(0, 0, 0)";
                        //ctx.fill();
                        ctx.stroke();
                        dottab=1;
                        return 0;
                    }
                }
                
            }
            function switc()
            {
                alert(window.document.onmousemove); 
            }
            </script>
    </head>
    <body>
        <canvas id="drawLine" width="300" height="300" onmousedown="hold();" 
            onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
        <button type="button" onclick="Color(2)"> Red </button>
        <button type="button" onclick="Color(1)"> Blue </button>
        <button type="button" onclick="Color(0)"> White(Eraser) </button>
        <button type="button" onclick="switc()"> LINE </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년스터디