继上次学习了HTML5的路径画圆做了动态时钟、异次元空间的反转做了运动的太阳系，这两天将画线、画圆、填充等知识点结合起来做了一个简易的在线画图工具：

查看DEMO：HTML5简易在线画图工具

功能包括自由画笔、橡皮擦、文字填充、画三角形、画圆等，相对我这个新手来说，感觉挺难的，不过还是参考了资料慢慢“拼”出来了。

自由画笔的思路：/******* 自由画笔 *******/

function dBrush(n){

setStatus(actions,n,1);

//鼠标按下的时候

var status = 0;

canvas.οnmοusedοwn=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.οnmοusemοve=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.οnmοuseup=function(){

can.closePath();

status=0;

}

//鼠标移出canvas画布结束画图

canvas.οnmοuseοut=function(){

can.closePath();

status=0;

}

}

填充文字，主要用到fillText(val,x,y)：/******* 文字 *******/

function dText(n){

setStatus(actions,n,1);

canvas.οnmοusedοwn=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.οnmοuseup=null;

canvas.οnmοusemοve=null;

canvas.οnmοuseοut=null;

}

直线工具，主要确定起点和终点，然后lineTo(x,y)就可以了：/******* 直线 *******/

function dLine(n){

setStatus(actions,n,1);

//画直线，鼠标按下时，当前鼠标位置为起点

canvas.οnmοusedοwn=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.οnmοuseup=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.οnmοusemοve=null;

canvas.οnmοuseοut=null;

}

最后贴一个空心圆，起点坐标为圆心，鼠标移动距离为半径：/******* 空心圆圈 *******/

function dArc(n){

setStatus(actions,n,1);

var sX=0; //内部的“全局标量”

var sY=0;

//画空心圆，鼠标按下时，当前鼠标位置为圆心

canvas.οnmοusedοwn=function(e){

e=window.event||e;

sX=e.pageX-this.offsetLeft;

sY=e.pageY-this.offsetTop;

}

//画空心圆，鼠标抬起时，当前鼠标位置为外圆结束点

canvas.οnmοuseup=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.οnmοusemοve=null;

canvas.οnmοuseοut=null;

}

好了，剩下的其他工具代码就不贴了，可以查看DEMO里的源代码。