canvas 路径的绘制

最新推荐文章于 2023-10-10 11:50:12 发布

神奇大叔

最新推荐文章于 2023-10-10 11:50:12 发布

阅读量710

点赞数

分类专栏： HTML5 新特性文章标签： canvas

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103984786

版权

HTML5 新特性专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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';尖角连接
		
	3.5、点是否在路径中
		ctx.isPointInPath(20,50);	 	边框内的范围也算在路径中
		context.isPointInStroke(x, y);	只检测是否在边框的路径中

	4、设置虚线; bi.setLineDash([第一段长度,第二段长度,...])
		按照数组中的设置,循环设置虚线-空白的长度;
		如bi.setLineDash([10,20,30]);
	     	虚线10 空白20 虚线30 空白10 虚线20
	     	
	    获取虚线样式,如果设置的虚线是个数,则会返回相同的两个变成偶数
	    	bi.getLineDash();
	    	
	    设置虚线位移
	    	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)

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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();                // 进行绘制

在这里插入图片描述

代码示例:

<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>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 路径的绘制

canvas 路径的绘制 1、设置笔触点(落笔点)坐标; bi.moveTo(x,y);默认左上角顶点 2、设置笔触点路径(可多条路径); bi.lineTo(x,y); 3、设置笔触颜色; bi.strokeStyle='颜色' 4、笔触绘制; bi.stroke(); 若路径是封闭图形 5、设置填充颜色(只是设置不填充); bi.fillStyle='颜色'; 6、开始封闭...
复制链接

扫一扫