canvas实现环形文本

最新推荐文章于 2024-04-22 20:07:06 发布

灿尔哈擦苏

最新推荐文章于 2024-04-22 20:07:06 发布

阅读量4.9k

点赞数

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

本文链接：https://blog.csdn.net/susuzhe123/article/details/75007885

版权

<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));
		}
		//转换弧度

最低0.47元/天解锁文章

灿尔哈擦苏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas实现环形文本

环形文本 .pie { width: 580px; height: 118px; margin: 0 auto; } var title = "苏哲苏成长报告";//自定义文本内容 var canvas = document.getElementById('canvas'); var ctx = canvas.ge
复制链接

扫一扫