canvas 圆形、椭圆、文本

最新推荐文章于 2023-10-07 16:37:13 发布

神奇大叔

最新推荐文章于 2023-10-07 16:37:13 发布

阅读量537

点赞数

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

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

版权

HTML5 新特性专栏收录该内容

14 篇文章 1 订阅

订阅专栏

canvas
	圆形绘制
	
	1、bi.arc(圆心x,圆心y,半径r,开始弧度,结束弧度,绘制方向);
	  bi.arc(圆心x,圆心y,半径r,结束弧度,开始弧度,绘制方向);
		弧度:格式为(0-2*Math.PI),会自动转换成弧度;  0代表0度,1代表180度
		绘制方向:false顺时针,true逆时针。
	
	2、绘制实心圆
		bi.fillStyle
		bi.fill()
		
	3、绘制圆环
		bi.lineWidth				设置圆环宽度
		bi.strokeStyle				设置圆环颜色
		bi.setLineDash([10,20,30]);	设置圆环边框样式
		bi.stoke()					绘制
	
	4、绘制椭圆
		bi.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
		x			椭圆弧对应的圆心横坐标。
		y			椭圆弧对应的圆心纵坐标。
		radiusX		椭圆弧的长轴半径大小。
		radiusY		椭圆弧的短轴半径大小。
		rotation		椭圆弧的旋转角度,单位是弧度,角度*Math.PI/180,默认顺时针
		startAngle		圆弧开始的角度,角度从横轴开始算,单位是弧度,角度*Math.PI/180
		endAngle		圆弧结束的角度,单位是弧度,角度*Math.PI/180
		anticlockwise	弧度的开始到结束的绘制是按照顺时针来算,还是按时逆时针来算,如何设置为true,则表示按照逆时针方向从startAngle绘制到endAngle,默认为顺时针

文本
	ctx.font="italic small-caps bold 12px arial";	设置非颜色以外的样式
	设置文本位置
		ctx.textAlign="center|end|left|right|start";
			ctx.textAlign="start";
			ctx.fillText("textAlign=start",150,60);
			ctx.textAlign="end";
			ctx.fillText("textAlign=end",150,80);
			ctx.textAlign="left";
			ctx.fillText("textAlign=left",150,100);
			ctx.textAlign="center";
			ctx.fillText("textAlign=center",150,120);
			ctx.textAlign="right";
			ctx.fillText("textAlign=right",150,140);
			
	设置文本水平基准线
		context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
			alphabetic	默认,文本基线是普通的字母基线。
			top			文本基线是方框的顶端。。
			hanging		文本基线是悬挂基线。
			middle		文本基线是方框的正中。
			ideographic	文本基线是表意基线。
			bottom		文本基线是方框的底端。
			
			在y=200以不同的 textBaseline 值放置每个单词
			ctx.textBaseline="top";
			ctx.fillText("Top",5,100);
			ctx.textBaseline="bottom";
			ctx.fillText("Bottom",50,100);
			ctx.textBaseline="middle";
			ctx.fillText("Middle",120,100);
			ctx.textBaseline="alphabetic";
			ctx.fillText("Alphabetic",190,100);
			ctx.textBaseline="hanging";
			ctx.fillText("Hanging",290,100);
		
	绘制带边框的文本
		ctx.lineWidth=1
		ctx.strokeStyle='red'
		ctx.setLineDash([10,5]);		设置边框虚线
		ctx.strokeText("Hello World",10,50,可选文字最大宽度)	宽度超出会压缩文字,而非换行
		
	绘制实心的文本
		ctx.fillStyle='red'
		ctx.fillText("Hello World",10,50,可选文字最大宽度);
	
	返回文本宽度
		ctx.font="30px Arial";
		let txt="Hello World"
		console.log(ctx.measureText(txt).width)

圆形示意图:
在这里插入图片描述

在这里插入图片描述

代码示例:

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