canvas实现环形文本

最新推荐文章于 2024-12-05 23:41:24 发布

灿尔哈擦苏

最新推荐文章于 2024-12-05 23:41:24 发布

阅读量5.2k

点赞数

分类专栏： web前端开发 js 文章标签： canvas 环形文本字体旋转弧形字体文字环绕

本文链接：https://blog.youkuaiyun.com/susuzhe123/article/details/75007885

版权

web前端开发同时被 2 个专栏收录

82 篇文章

订阅专栏

64 篇文章

订阅专栏

这篇博客介绍了如何利用HTML5的canvas元素和JavaScript来实现环形文本的绘制。通过设置canvas的尺寸、获取2D渲染上下文，结合数学计算和文本属性，实现了自定义文本围绕圆形路径显示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>环形文本</title>
	</head>
	<style>
		.pie {
			width: 580px;
			height: 118px;
			margin: 0 auto;
		}
	</style>

	<body>
		<div class="pie" style="background: #f44;">
			<canvas id="canvas" width="960" height="960" style="width:320px;height:320px;"></canvas>
		</div>
	</body>
	<script>
		var title = "苏哲苏成长报告";//自定义文本内容
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		if(canvas.getContext) {
			var circle = {
				x: 480,
				y: 2000,
				radius: 1900
			}
			drawCircularText(circle,title, rads(260), rads(286));
		}
		//转换弧度
		function rads(x) {
			return Math.PI * x / 180;
		}
			function drawCircularText(s, string, startAngle, endAngle) {
			var radius = s.radius,
				angleDecrement = (startAngle - endAngle) / (string.length - 1),
				angle = parseFloat(startAngle),
				index = 0,
				character;
			ctx.save();
			ctx.fillStyle = 'black';
			ctx.font = '160px 微软雅黑';
			ctx.textAlign = 'right';
			ctx.textBaseline = 'middle';
			while(index < string.length) {
				character = string.charAt(index);
				ctx.save();
				ctx.beginPath();
				ctx.translate(s.x + Math.cos(angle) * radius,
					s.y + Math.sin(angle) * radius);
				ctx.rotate(Math.PI / 2 + angle);
				ctx.fillText(character, 0, 0);
				angle -= angleDecrement;
				index++;
				ctx.restore();
			}
			ctx.restore();
		}
	</script>