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

Latest revision as of 00:16, 27 March 2026

소스를 올려주세요

김태진

<!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 saveX=new Array();
            var saveY=new Array();
            var temp,i=0,j=0;
            var lastImage0,lastImage1,lastImage2,imageN;

            
        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()
            {

                dotx=undefined;
                doty=undefined;
                if(lastImage1!=element.toDataURL()){
                    lastImage2=lastImage1;
                }
                lastImage1=element.toDataURL();
                flag=false;
                j++;
            }


//            var draw=new array();
//            draw.color=a;
//            draw.color();
//            
            function undo()
            {
                ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);
                
                var img = new Image();
                img.onload = function(){
                    ctx.drawImage(img,0,0);
                }
                
                img.src = lastImage2;
            }
            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;
                    saveX[i]=event.x;
                    saveY[i]=event.y;
                    i++;
                    ctx.stroke();
                    return 0;
                }
                
            }
            </script>
    </head>
    <body>

        <canvas id="drawLine" width="300" height="300" onmousedown="hold();" 
            onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
        Choose Color:
        <select name="colors"onclick="selectColor(this.selectedIndex)">
            <option value="White">White(Eraser)</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
            <option value="Black"selected="selected">Black</option>
        </select>
        Choose Style:
        <button type="button" onclick="drawMethod(1)"> LINE </button>
        <button type="button" onclick="drawMethod(2)"> DOT </button>
        <button type="button" onclick="undo()"> UNDO </button>
            <!--
        <form action="">
        </form>
         -->
        <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>

박정근

CanvasJs.html

<!DOCTYPE   html>
<html lang="en">
    <head>
	<meta charset="utf-8">
	<title>Javascript canvas Page</title>
	<script language ="Javascript" src ="canvasJS.js"></script>
    </head>
    <body>
	<canvas id="testCanvas" width="900" height="500" style="border: 1px solid black"></canvas>
    </body>
</html>

canvasJs.js

var canvas, ctx, tool;
var dataURL;
var canvas1, ctx1;
//var img = new Image();
if(window.addEventListener){
    window.addEventListener("load", InitEvent, false);
}

function aldo(){
    dataURL = canvas.toDataURL();
}
function bldo(){
    ctx.clearRect(0,0,500,500);
}
function cldo(){
 //   ctx.clearRect(0,0,500,500);

    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img,0,0);
    }
    
    img.src = dataURL;
}

function InitEvent(){
    canvas = document.getElementById('testCanvas');
    ctx = canvas.getContext('2d');
    if(!canvas){
	alert("Can't find Canvas Objective!");
	return;
    }
//    canvas1 = document.getElementById('testCanvas1');
//    ctx1.canvas1.getContext('2d');

tool = new tool_line();
    
    canvas.addEventListener("mousedown", ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup', ev_canvas, false);
}

//연필로 그리기
var tool_pencil = function(){
    var tool = this;
    this.started = false;
    
    //마우스를 누를때 그리기 시작
    this.mousedown = function(e){
	ctx.beginPath();
	ctx.moveTo(e._x, e._y);
	tool.started = true;
    };
    
    //마우스를 이동할때마다 호출.
    this.mousemove = function(e){
	if(tool.started){
            ctx.clearRect(0,0,500,500)
	    ctx.lineTo(e._x, e._y);
	    ctx.stroke();
	}
    }
    
    //마우스 좌측버튼을 놓았을때
    this.mouseup = function(e){
	if(tool.started){
	    tool.mousemove(e);
	    tool.started = false;
	}
    };    
}


//직선 그리기
var tool_line = function(){
    var tool = this;
    this.started = false;
    var x,y;
    var check=0;
    
    //마우스를 누를때 그리기 시작
    this.mousedown = function(e){
        if(tool.started==false)
            dataURL = canvas.toDataURL();
        
	ctx.beginPath();
	x = e._x;   y = e._y;
   //     ctx.moveTo(x, y);
	tool.started = true;
    };
    
    //마우스를 이동할때마다 호출.
    this.mousemove = function(e){
        
	if(tool.started){
            ctx.clearRect(0,0,500,500);
            ctx.moveTo(x,y);
            check++;
	    ctx.clearRect(0,0,500,500);
            ctx.lineTo(e._x, e._y);
            ctx.clearRect(0,0,500,500);
            ctx.stroke();
            
        }
    }
    
    //마우스 좌측버튼을 놓았을때
    this.mouseup = function(e){
	if(tool.started){
            //tool.mousemove(e)
            ctx.clearRect(0,0,500,500)
            cldo()
            //ctx.moveTo(x,y)
            //ctx.lineTo(e._x, e._y)
            //ctx.stroke()
            alert(check);
            
	    tool.started = false;
	}
    };    
}




function ev_canvas(e){
    if(e.layerX || e.layerY == 0){
	e._x = e.layerX;
	e._y = e.layerY;
    }
    
    var func = tool[e.type];
    if(func){
	func(e);
    }

}

JavaScript/2011년스터디