牛叉的html5 canvas示例，仿Photoshop鋼筆工具效果

2024-09-05 12:18:48

字體：大中小

來源：轉載

供稿：網友

不得不佩服本代碼作者，再次對分享代碼表示敬佩和感謝。貝塞爾曲線的可視化操作演示，用過PhotoShop的都知道吧，鉛筆工具也是一重要的工具，當我看到作者用HTML5模擬出鉛筆工具的時候，我真的很驚訝哦，模擬的真像呀。在屏幕中點擊并可拖動，你可控的點有4個，其核心是畫貝塞爾曲線，但是鼠標可控。

<!doctype html><html><head><meta charset='UTF-8' /><title>貝塞爾曲線可視化操作</title><style>*{padding:0;margin:0;}body{padding:20px;}</style></head><body><canvas id="pad" width='800' height='500'  style='position:relative;border:1px solid #ccc;'>提醒：ie用戶(9以下)請繞行！</canvas><div   class="xddvlrh"   id='output'>在屏幕中點擊并可拖動，你可控的點有4個</div><button onclick='document.location.reload()'>刷新</button><script type="text/javascript">var $id=function(n){	return document.getElementById(n) || n;}$id("pad").addEventListener("mousedown", main, false);var con=$id("pad").getContext('2d');	con.strokeStyle = '#000';	con.lineWidth=0.2;var vector={sta:[],end:[],cr1:[],cr2:[]}function main(){	var e=arguments[0];	var cx=e.layerX || e.offsetX,   //鼠標起點		cy=e.layerY || e.offsetY;		init(cx,cy);   //初始化點	var sx=parseInt(vector.sta[0]), //起點		sy=parseInt(vector.sta[1]),		ex=parseInt(vector.end[0]), //終點		ey=parseInt(vector.end[1]),		cr1x=parseInt(vector.cr1[0]), //控制點1		cr1y=parseInt(vector.cr1[1]),		cr2x=parseInt(vector.cr2[0]), //控制點2		cr2y=parseInt(vector.cr2[1]);	if(vector.end[0] == undefined) return;  //僅有起點時，退出。	if(cr1x-5 < cx && cx < cr1x + 5 && cr1y-5 < cy && cy < cr1y +5){    //選中控制點1		 discern('ctr1',cx,cy,cr1x,cr1y,cr2x,cr2y);	}	else if(cr2x-5 < cx && cx < cr2x + 5 && cr2y-5 < cy && cy < cr2y +5){  //選中控制點2		discern('ctr2',cx,cy,cr1x,cr1y,cr2x,cr2y);	}	else if(sx-5 < cx && cx < sx + 5 && sy-5 < cy && cy < sy +5){  //選中起點	    discern('start',cx,cy,cr1x,cr1y,cr2x,cr2y);	}	else if(ex-5 < cx && cx < ex + 5 && ey-5 < cy && cy < ey +5 ){  //選中終點		discern('end',cx,cy,cr1x,cr1y,cr2x,cr2y);	}	document.onmouseup=function(){		document.onmousemove=null;	}}function init(cx,cy){	if(vector.sta[0] == undefined){  //若無起點時，初始化起點		vector.sta[0] = vector.cr1[0] = cx;		vector.sta[1] = vector.cr1[1] = cy;		con.fillRect(vector.sta[0]-1, vector.sta[1]-1 ,3,3);	}	else if(vector.end[0] == undefined){  //若無終點，初始化終點		vector.end[0] = vector.cr2[0] = cx;		vector.end[1] = vector.cr2[1] = cy;		con.fillRect(vector.end[0]-1, vector.end[1]-1 ,3,3);		draw()  //已有兩點，開始繪線	}}function discern(v,cx,cy,cr1x,cr1y,cr2x,cr2y){	document.onmousemove=function(e){		var dx=e.layerX || e.offsetX,  //鼠標當前坐標			dy=e.layerY || e.offsetY;		switch(v) {			case 'start' :  //拖動起點				vector.sta[0]=dx;				vector.sta[1]=dy;				vector.cr1[0] = cr1x + (dx-cx);				vector.cr1[1] = cr1y + (dy-cy);				break;			case 'end' :				vector.end[0]=dx;				vector.end[1]=dy;				vector.cr2[0] = cr2x + (dx-cx);				vector.cr2[1] = cr2y + (dy-cy);				break;			case 'ctr1' :				vector.cr1[0] = dx;				vector.cr1[1] = dy;				break;			case 'ctr2' :				vector.cr2[0] = dx;				vector.cr2[1] = dy;				break;			default: break;		}		draw();	}}function draw(){	 con.clearRect(0,0,800,500);	 //畫貝塞爾曲線	 con.beginPath();	 con.moveTo(vector.sta[0], vector.sta[1]);	 con.bezierCurveTo(vector.cr1[0], vector.cr1[1], vector.cr2[0], vector.cr2[1], vector.end[0], vector.end[1]);	 con.stroke();	 //畫控制線1	con.beginPath();	con.moveTo(vector.sta[0],vector.sta[1]);	con.lineTo(vector.cr1[0], vector.cr1[1]);	con.stroke();	 //畫控制線2	con.beginPath();	con.moveTo(vector.end[0], vector.end[1]);	con.lineTo(vector.cr2[0], vector.cr2[1]);	con.stroke();	 //畫4個控制點	con.strokeRect(vector.sta[0]-1, vector.sta[1]-1 ,3,3);	con.strokeRect(vector.end[0]-1, vector.end[1]-1 ,3,3);	con.fillRect(vector.cr1[0]-1, vector.cr1[1]-1 ,3,3);	con.fillRect(vector.cr2[0]-1, vector.cr2[1]-1 ,3,3);	//輸出貝塞爾函數	$id('output').innerHTML='moveTo(' + vector.sta[0] +',' + vector.sta[1] + ');<br />' + 'bezierCurveTo(' + vector.cr1[0] +','+ vector.cr1[1] +',' + vector.cr2[0] +',' + vector.cr2[1] +','+ vector.end[0] +',' + vector.end[1] +');';}</script></body></html>

上一篇：HTML5 canvas大風車動畫轉啊轉

下一篇：HTML5中實現的CSS 3D文字旋轉動畫