* 소스를 올려주세요
=== 김태진 ===
{{{
Choose Color:
Choose Style:
}}}
=== 박정근 ===
1. CanvasJs.html
{{{
Javascript canvas Page
}}}
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년스터디]