U E D R , A S I H C RSS
ZeroWiki

Java Script/2011년스터디/Canvas Paint

Difference between r1.2 and the current

@@ -9,10 +9,24 @@
var flag=false;
var element;
var ctx;
var color=3;
var firstdotx,firstdoty;
var seconddotx,seconddoty;
var dottab=1;
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;
@@ -24,83 +38,84 @@
}
function release()
{
 
dotx=undefined;
doty=undefined;
if(lastImage1!=element.toDataURL()){
lastImage2=lastImage1;
}
lastImage1=element.toDataURL();
flag=false;
j++;
}
function draw()
{
 
 
// 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:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 8, 0, Math.PI*2, false);
ctx.fillStyle="rgb(255, 255, 255)"; 
ctx.fill();
}
ctx.fillStyle="rgb(255, 255, 255)";
ctx.strokeStyle="rgb(255, 255, 255)";
break;
case 1:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(5, 5, 230)"; 
ctx.fill();
}
ctx.fillStyle="rgb(5, 5, 230)";
ctx.strokeStyle="rgb(5, 5, 230)";
break;
case 2:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 5, 0, Math.PI*2, false);
ctx.fillStyle="rgb(230, 5, 5)"; 
ctx.fill();
}
ctx.fillStyle="rgb(230, 5, 5)";
ctx.strokeStyle="rgb(255, 0, 0)";
break;
case 3:
if(ctx && flag){
ctx.beginPath();
ctx.arc(event.x-7, event.y-7, 3, 0, Math.PI*2, false);
ctx.fillStyle="rgb(0, 0, 0)"; 
ctx.fill();
}
ctx.fillStyle="rgb(0, 0, 0)";
ctx.strokeStyle="rgb(0, 0, 0)";
}
}
function red()
{ color=2;}
function blue()
{ color=1;}
function white()
{color=0;}
function line()
function drawDotPoint()
{
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, 3, 0, Math.PI*2, false);
ctx.fill();

//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 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;
}

}
@@ -108,12 +123,23 @@
</head>
<body>

<canvas id="drawLine" width="300" height="300" onmousedown="hold();"
onmouseup="release();" onmouseout="release();" onmousemove="line();"></canvas>
<button type="button" onclick="red()"> Red </button>
<button type="button" onclick="blue()"> Blue </button>
<button type="button" onclick="white()"> White(Eraser) </button>
<button type="button" onclick="line()"> Line </button>
<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);
@@ -124,3 +150,159 @@
</body>
</html>
}}}
=== 박정근 ===
1. 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>
}}}
2. 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년스터디]


  • 소스를 올려주세요

김태진 

<!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>

박정근

  1. 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>
  1. 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);
    }
}

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:23:30
Processing time 0.0483 sec