canvas 路径的绘制

不念不忘少年蓝@ 2021-07-24 18:59 596阅读 0赞

canvas
    	路径的绘制
    	1、设置笔触点(落笔点)坐标; bi.moveTo(x,y);默认左上角顶点,创建但不绘画
    	2、设置笔触点路径(可多条路径); bi.lineTo(x,y);
    	3、设置笔触颜色; bi.strokeStyle='颜色'
    	4、笔触绘制; bi.stroke();
    	
    	若路径是封闭图形
    	5、设置填充颜色(只是设置不填充); bi.fillStyle='颜色';
    	6、开始封闭图形颜色填充; bi.fill();  	若不封闭则会自动在起点和终点连线成封闭填充
    
    	避免不同canvas相互影响,设置开始和结束
    	7、bi.beginPath();	开启新路径图形绘制; 
    	8、bi.closePath();	从当前路径的终点连一条路径到起点,让整个路径闭合起来,并非结束当前路径,和beginPath几乎没有关系。
    	
    	线型
    	1、设置线宽; bi.lineWidth=数值;
    	
    	2、设置线段始末端端点(即包裹在始末端点); 
    		(1)bi.lineCap='butt';无端点
    		(2)bi.lineCap='round';圆角端点
    		(3)bi.lineCap='square';方块端点,线的端点多出一个方框,框框的宽度是线厚度的一半。
    		
    	3、设置连接类型(两条线段交会的对接方式);
    		(1)bi.lineJoin='round';圆弧连接
    		(2)bi.lineJoin='bevel';截面连接;即拿一个矩形斜45度截掉多余的,剩下来的部分
    		(3)bi.lineJoin='miter';尖角连接
    		
    	4、设置虚线; bi.setLineDash([第一段长度,第二段长度,...])
    		按照数组中的设置,循环设置虚线-空白的长度;
    		如bi.setLineDash([10,20,30]);
    	     	虚线10 空白20 虚线30 空白10 虚线20
    	     	
    	    设置虚线位移
    	    	bi.lineDashOffset=0;	默认为0,及虚线起点不位移,正值会向前位移
    	
    	5、设置斜接长度
    		bi.miterLimit=number;	只有当lineJoin属性为"miter"时,miterLimit才有效如果斜接长度超过miterLimit的值,边角会以lineJoin的"bevel"类型来显示。![在这里插入图片描述](https://csdn-img-blog.oss-cn-beijing.aliyuncs.com/b33bc759f9be49168dbb41893e4daede.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70)

![在这里插入图片描述][73ecc277047bb6c8c3c5c83d4eb36e9b.png]

6、绘制二次贝塞尔曲线
    	曲线的开始点是当前路径中最后一个点,通过二次贝塞尔曲线的指定控制点,向当前路径添加一个点。
    	ctx.beginPath();
    	ctx.moveTo(20,20);
    	ctx.quadraticCurveTo(20,100,200,20);
    		ctx.quadraticCurveTo(塞尔控制点的x坐标,贝塞尔控制点的y坐标,结束点的x坐标,结束点的y坐标);
    	ctx.stroke();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

7、绘制三次贝塞尔曲线
    	三次贝塞尔曲线需要三个点,前两个点是用于三次贝塞尔计算中的控制点,第三个点是曲线的结束点,曲线的开始点是当前路径中最后一个点
    	ctx.beginPath();
    	ctx.moveTo(20,20);
    	ctx.bezierCurveTo(20,100,200,100,200,20);
    	ctx.stroke();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

8、绘制弧/曲线
    	根据两个控制点的两个切线之间的弧/曲线,半径控制弧的大小
    	ctx.arcTo(弧的起点的x1坐标,弧的起点的y1坐标,弧的终点的x2坐标,弧的终点的y2坐标,弧的半径)
    	
    	ctx.moveTo(20,20);           // 创建开始点
    	ctx.lineTo(100,20);          // 创建水平线
    	ctx.arcTo(150,20,150,70,50); // 创建弧
    	ctx.lineTo(150,120);         // 创建垂直线
    	ctx.stroke();                // 进行绘制

![在这里插入图片描述][8f7f923284b3482e90cd210b22f07bc3.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    		.canvas{ 
    			border:solid 2px black;
    		}
    	
    	
    	</style>
    </head>
    <body>
    
    	<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
    	<script>
    			var	canvas=document.querySelector(".canvas");
    			var ctx=canvas.getContext('2d');
    			
    			ctx.beginPath();
    			ctx.fillStyle="red";
    			ctx.fillRect(20,20,300,200);
    			ctx.stroke();
    			
    			ctx.beginPath();
    			ctx.moveTo(100,100);
    			ctx.lineTo(200,200);
    			ctx.lineTo(300,50);
    			ctx.lineWidth=1;
    			ctx.strokeStyle='green';
    			ctx.stroke();
    			ctx.closePath();
    			
    			ctx.beginPath();
    			ctx.moveTo(300,50);
    			ctx.lineTo(100,20);
    			ctx.lineTo(140,300);
    			ctx.lineWidth=5;
    			ctx.strokeStyle='blue';
    			ctx.stroke();
    
    	</script>
    	
    </body>
    
    </html>

[73ecc277047bb6c8c3c5c83d4eb36e9b.png]: /images/20210724/ccac3865c07e4223a90d93273b256f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/dbca4a0c5f804436a30ae4b0ac77f928.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/7333d6d5bed84d5aad099b348d8287c4.png
[8f7f923284b3482e90cd210b22f07bc3.png]: /images/20210724/e621fe7311554b63b194fb6c653fa897.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/681b458c31754d64a2a7e93e5443cd64.png