* 소스를 올려주세요
=== 김태진 ===
{{{
Choose Color:
Choose Style:
}}}
=== 박정근 ===
1. CanvasJs.html
{{{
Javascript canvas Page
}}}
2. canvasJs.js
{{{
var canvas, ctx, tool;
if(window.addEventListener){
window.addEventListener("load", InitEvent, false);
}
function InitEvent(){
canvas = document.getElementById('testCanvas');
ctx = canvas.getContext('2d');
if(!canvas){
alert("Can't find Canvas Objective!");
return;
}
tool = new tool_pencil();
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.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;
//마우스를 누를때 그리기 시작
this.mousedown = function(e){
ctx.beginPath();
ctx.moveTo(e._x, e._y);
tool.started = true;
x = e._x; y = e._y;
};
//마우스를 이동할때마다 호출.
this.mousemove = function(e){
if(tool.started){
ctx.lineTo(x, y);
ctx.stroke();
}
}
//마우스 좌측버튼을 놓았을때
this.mouseup = function(e){
if(tool.started){
tool.mousemove(e);
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년스터디]