¶
<!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);
}
}
