繼上次學習了HTML5的路徑畫圓做了動態時鐘、異次元空間的反轉做了運動的太陽系，這兩天將畫線、畫圓、填充等知識點結合起來做了一個簡易的線上畫圖工具：
查看DEMO：HTML5簡易線上畫圖工具
功能包括自由畫筆、橡皮擦、文字填充、畫三角形、畫圓等，相對我這個新手來說，感覺挺難的，不過還是參考了資料慢慢「拼」出來了。
自由畫筆的思路：
/******* 自由画笔 *******/
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)：
/******* 文字 *******/
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)就可以了：
/******* 直线 *******/
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;
}最後貼一個空心圓，起點座標為圓心，滑鼠移動距離為半徑：
/******* 空心圆圈 *******/
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裡的原始碼。
以上是詳細介紹HTML5簡易線上畫圖工具的實作案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
