牛叉的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 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文字旋转动画