canvas_canvas csdn-CSDN博客

本文链接：https://blog.csdn.net/pipi7772/article/details/7450789

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=768px, maximum-scale=1.0" />
<title>sketchpad</title>
<script type="text/javascript" charset="utf-8">

function get_X(obj){
var ParentObj=obj;
var left=obj.offsetLeft;
while(ParentObj=ParentObj.offsetParent){
left+=ParentObj.offsetLeft;
}
return left;
}

function get_Y(obj){
var ParentObj=obj;
var top=obj.offsetTop;
while(ParentObj=ParentObj.offsetParent){
top+=ParentObj.offsetTop;
}
return top;
}

window.addEventListener('load',function(){
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
//div absolute coordinate
canvas_x = get_X(canvas);
canvas_y = get_Y(canvas);

context.strokeStyle = '#0074CC';
context.beginPath();
context.moveTo(70,180);
context.lineTo(670,180);
context.closePath();
context.stroke();
context.strokeStyle = 'black';
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
mousedown: function(coors){
context.beginPath();
context.moveTo(coors.x, coors.y);
//alert(coors.x+ ',' +coors.y)
this.isDrawing = true;
},
mousemove: function(coors){
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
mouseup: function(coors){
if (this.isDrawing) {
this.mousemove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event){
// get the touch coordinates
var coors = {
x: event.pageX - canvas_x,//.targetTouches[0]
y: event.pageY - canvas_y
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}

// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('mousedown',draw, false);
canvas.addEventListener('mousemove',draw, false);
canvas.addEventListener('mouseup',draw, false);

// prevent elastic scrolling
document.body.addEventListener('mousemove',function(event){
event.preventDefault();
},false); // end body.onTouchMove
},false); // end window.onLoad

function clear_canvas(){
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
if(context) {
//canvas.width = canvas.width;
context.clearRect ( 0 , 0 , canvas.width , canvas.height );
context.strokeStyle = '#0074CC';
context.beginPath();
context.moveTo(70,180);
context.lineTo(670,180);
context.closePath();
context.stroke();
context.strokeStyle = 'black';
}
}

function send(){
var canvas = document.getElementById('sketchpad');
var img = canvas.toDataURL('image/png');
document.getElementById('tt').value = img;
//alert(img);
return false;
}

</script>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<style type="text/css">
h3 {
display: inline;
}

.container2 {
border: 1px solid black;
padding: 10%; *
zoom: 1;
}
</style>
</head>
<body>
<div class="container" style="">
<div class="container2">
<form>
<table width="100%">
<tr>
<td>
<h3>Enter your initial</h3>
</td>
<tr></tr>
<td><input id="tt" class="input-xlarge" /></td>
</tr>
<tr>
<td>
<h3>Drwa your initial</h3>
&nbsp<a href="#" οnclick="clear_canvas()">Clear</a></td>
</tr>
<tr>
<td><canvas style="border:1px solid #ccc" id="sketchpad"
width="740" height="240"> Sorry, your browser is not
supported. </canvas></td>
</tr>
<tr>
<td>
<a class="btn btn-primary" οnclick="send();">Apply</a>
&nbsp
<button class="btn">Cancel</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>

</html>

http://tenderlovingcode.com/blog/web-apps/html5-canvas-drawing-on-ipad/

http://stackoverflow.com/questions/1590965/uploading-canvas-image-data-to-the-server

http://diveintohtml5.info/