笔触效果尝试

直接运行代码看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body bgcolor="#000"> <div style="width:1000px;height:600px;background-color:#fff;"> <canvas id="screen" width="1000" height="600">骚瑞，您的浏览器不支持canvas</canvas> </div> <script type="text/javascript"> var $=function(id){ return document.getElementById(id); }; var screen=document.getElementById("screen"), context=screen.getContext("2d"); var boldValue=10, t=0, d=0, x=0, y=0, mousePoints=[], stopV=0, isDraw=false; function drawPoint(x,y,c,b) { !b && (b=2); context.fillStyle=c || "red"; context.fillRect(x,y,b,b); } function drawBall(x,y,r){ context.fillStyle="red"; context.beginPath(); context.arc(x,y,r,0,Math.PI*2,true); context.closePath(); context.fill(); } function getPointsDistance(point1,point2){ return Math.sqrt(Math.pow(point1[0]-point2[0],2) + Math.pow(point1[1]-point2[1],2)); } function drawLine(x1,y1,x2,y2,b1,b2){ var xDirection=(x2-x1)/Math.abs(x2-x1); var yDirection=(y2-y1)/Math.abs(y2-y1); var xDistance=x2-x1; var yDistance=y2-y1; var xPercentage=1/Math.abs(x2-x1); var yPercentage=1/Math.abs(y2-y1); var list; if(Math.abs(x1-x2)>=Math.abs(y1-y2)){ list=getList(b1,b2,Math.abs(xDistance)); for(var i=0;i<=Math.abs(xDistance);i++){ x1+=xDirection; y1=y1+yDistance*xPercentage; drawBall(x1,y1,list[i]); boldValue=list[i]; } } else{ list=getList(b1,b2,Math.abs(yDistance)); for(var i=0;i<=Math.abs(yDistance);i++){ y1+=yDirection; x1=x1+xDistance*yPercentage; drawBall(x1,y1,list[i]); boldValue=list[i]; } } } function getList(m,n,l){ var v=(n-m)/l, ret=[m]; for(var i=0;i<l;i++){ ret.push(ret[i]+v); } return ret; } screen.addEventListener("mousedown",function(evt){ boldValue=5; x=evt.clientX, y=evt.clientY; isDraw=true; }); screen.addEventListener("mouseup",function(evt){ isDraw=false; x=evt.clientX, y=evt.clientY; }); screen.addEventListener("mousemove",function(evt){ var x2=evt.clientX, y2=evt.clientY; d=getPointsDistance([x,y],[x2,y2]); var b2=Math.max(boldValue-(d/80)*boldValue,1); isDraw && drawLine(x,y,x2,y2,boldValue,b2); x=x2; y=y2; }); setInterval(function(){ boldValue=Math.min(30,boldValue+1); if(isDraw){ drawBall(x,y,boldValue); } },50); </script></body> </html>