-
Notifications
You must be signed in to change notification settings - Fork 22
/
index.html
112 lines (93 loc) · 3.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<title>画板实验</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>-->
<script type="text/javascript" src='../lib/jquery-1.7.2.js'></script>
<style type="text/css"></style>
</head>
<body >
<canvas id="myCanvas" ></canvas>
<div>
<button onclick="clean();">清 空</button>
<button onclick="save();">生成图片</button>
</div>
<img id='img' alt='请涂鸦……'/>
<script type="text/javascript">
var canvas,board,img;
canvas = document.getElementById('myCanvas');
img= document.getElementById('img');
canvas.height = 300;
canvas.width = $(window).width();
board = canvas.getContext('2d');
var mousePress = false;
var last = null;
function beginDraw(){
mousePress = true;
}
function drawing(event){
event.preventDefault();
if(!mousePress)return;
var xy = pos(event);
if(last!=null){
board.beginPath();
board.moveTo(last.x,last.y);
board.lineTo(xy.x,xy.y);
board.stroke();
}
last = xy;
}
function endDraw(event){
mousePress = false;
event.preventDefault();
last = null;
}
function pos(event){
var x,y;
if(isTouch(event)){
x = event.touches[0].pageX - 10;
y = event.touches[0].pageY - 10;
}else{
x = event.offsetX+event.target.offsetLeft -10 ;
y = event.offsetY+event.target.offsetTop -10;
}
// log('x='+x+' y='+y);
return {x:x,y:y};
}
function log(msg){
var log = document.getElementById('log');
var val = log.value;
log.value = msg+'\n'+val;
}
function isTouch(event){
var type = event.type;
if(type.indexOf('touch')>=0){
return true;
}else{
return false;
}
}
function save(){
//base64
var dataUrl = canvas.toDataURL();
// dataUrl = dataUrl.replace("image/png", "image/octet-stream");
img.src = dataUrl;
}
function clean(){
board.clearRect(0,0,canvas.width,canvas.height);
}
board.lineWidth = 1;
board.strokeStyle="#0000ff";
canvas.onmousedown = beginDraw;
canvas.onmousemove = drawing;
canvas.onmouseup = endDraw;
canvas.addEventListener('touchstart',beginDraw,false);
canvas.addEventListener('touchmove',drawing,false);
canvas.addEventListener('touchend',endDraw,false);
</script>
</body>
</html>