繼上次學習了HTML5的路徑畫圓做了動態時鍾、異次元空間的反轉做了運動的太陽系，這兩天將畫線、畫圓、填充等知識點結合起來做了一個簡易的在線畫圖工具：
查看DEMO：HTML5簡易在線畫圖工具
功能包括自由畫筆、橡皮擦、文字填充、畫三角形、畫圓等，相對我這個新手來說，感覺挺難的，不過還是參考了資料慢慢“拼”出來了。
自由畫筆的思路：
|
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
|
/******* 自由畫筆 *******/
function
dBrush(n){
setStatus(actions,n,1);
//鼠標按下的時候
var
status = 0;
canvas.onmousedown=
function
(e){
e=window.event||e;
var
sX=e.pageX-
this
.offsetLeft;
var
sY=e.pageY-
this
.offsetTop;
can.beginPath();
can.moveTo(sX,sY);
status=1;
}
//鼠標移動的時候
canvas.onmousemove=
function
(e){
e=window.event||e;
var
eX=e.pageX-
this
.offsetLeft;
var
eY=e.pageY-
this
.offsetTop;
if
(status==1){
can.lineTo(eX,eY);
can.stroke();
}
else
{
return
false
}
}
//鼠標抬起的時候
canvas.onmouseup=
function
(){
can.closePath();
status=0;
}
//鼠標移出canvas畫布結束畫圖
canvas.onmouseout=
function
(){
can.closePath();
status=0;
}
}
|
填充文字，主要用到fillText(val,x,y)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/******* 文字 *******/
function
dText(n){
setStatus(actions,n,1);
canvas.onmousedown=
function
(e){
e=window.event||e;
var
x=e.pageX-
this
.offsetLeft;
var
y=e.pageY-
this
.offsetTop;
var
val = window.prompt(
'輸入填充的文字'
,
''
);
if
(val==
null
)
return
false
;
//輸入為空則返回
can.fillText(val,x,y);
dBrush(0);
//填入文字后返回自由畫筆工具
}
canvas.onmouseup=
null
;
canvas.onmousemove=
null
;
canvas.onmouseout=
null
;
}
|
直線工具，主要確定起點和終點，然后lineTo(x,y)就可以了：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/******* 直線 *******/
function
dLine(n){
setStatus(actions,n,1);
//畫直線，鼠標按下時，當前鼠標位置為起點
canvas.onmousedown=
function
(e){
e=window.event||e;
var
sX=e.pageX-
this
.offsetLeft;
var
sY=e.pageY-
this
.offsetTop;
can.beginPath();
can.moveTo(sX,sY);
}
//畫直線，鼠標抬起時，當前鼠標位置為終點
canvas.onmouseup=
function
(e){
e=window.event||e;
var
eX=e.pageX-
this
.offsetLeft;
var
eY=e.pageY-
this
.offsetTop;
can.lineTo(eX,eY);
can.closePath();
can.stroke();
}
canvas.onmousemove=
null
;
canvas.onmouseout=
null
;
}
|
最后貼一個空心圓，起點坐標為圓心，鼠標移動距離為半徑：
|
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
|
/******* 空心圓圈 *******/
function
dArc(n){
setStatus(actions,n,1);
var
sX=0;
//內部的“全局標量”
var
sY=0;
//畫空心圓，鼠標按下時，當前鼠標位置為圓心
canvas.onmousedown=
function
(e){
e=window.event||e;
sX=e.pageX-
this
.offsetLeft;
sY=e.pageY-
this
.offsetTop;
}
//畫空心圓，鼠標抬起時，當前鼠標位置為外圓結束點
canvas.onmouseup=
function
(e){
e=window.event||e;
var
eX=e.pageX-
this
.offsetLeft;
var
eY=e.pageY-
this
.offsetTop;
var
dX=eX-sX
var
dY=eY-sY;
//計算出半徑
var
r = Math.sqrt(Math.pow(dX,2)+Math.pow(dY,2));
can.beginPath();
can.arc(sX,sY,r,0,360,
false
);
can.closePath();
can.stroke();
}
canvas.onmousemove=
null
;
canvas.onmouseout=
null
;
}
|
好了，剩下的其他工具代碼就不貼了，可以查看DEMO里的源代碼。