canvas 圆形、线段类型

canvas
	圆形绘制
	1、bi.arc(圆心x,圆心y,半径r,开始弧度,结束弧度,false);
	  bi.arc(圆心x,圆心y,半径r,结束弧度,开始弧度,true);
		(1)true:先开始结束后开始
		(2)false:先开始后结束
		(3)弧度:0-2*Math.PI自动转换成弧度;  0代表0度,1代表180度
		(4)都是顺时针绘制
		(5)0表示水平右边点,0.5表示竖直下方点,1表示水平左边点,2代表第二次到水平右边点

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

代码示例:

<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 bi=canvas.getContext('2d');

			// bi.beginPath();
			// bi.strokeStyle='red';
			// bi.arc(50,50,30,0*Math.PI,0.5*Math.PI,false)
			// bi.stroke();
			// bi.closePath();

			bi.beginPath();
			bi.strokeStyle='pink';
			bi.moveTo(10,10);
			bi.lineTo(40,10);
			bi.lineTo(40,30);
			bi.lineTo(10,10);
		    bi.lineWidth=5;
		    bi.lineCap='round';
		    bi.lineJoin='bevel';
		    bi.setLineDash([10,30]);
			bi.stroke();

			bi.closePath();


	</script>
	
</body>

</html>

神奇大叔

发布了281 篇原创文章 · 获赞 3 · 访问量 4831

私信关注

canvas 圆形、线段类型

猜你喜欢