CANVAS标签效果

最新推荐文章于 2023-04-18 20:31:46 发布

原创最新推荐文章于 2023-04-18 20:31:46 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

软件相关技术同时被 2 个专栏收录

12 篇文章

订阅专栏

javascript

4 篇文章

订阅专栏

本文介绍了一种利用JavaScript和HTML5的Canvas元素创建动态文字云的方法。通过随机生成不同大小、颜色和位置的文字标签，实现了视觉上丰富的效果。用户可以通过拖放输入框到画布区域，实时更新文字云的内容。

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

通过JS来向CANVAS画布中插入文字标签，并定义颜色数组和内容数组，通过Math.floor(Math.random()*n)来随机取出内容,循环n次，在画布上随机位置生成随机大小和颜色的标签。

新标签的添加通过jquery-ui的drag方法来实现，当输入框被拖入到新标签中时，自动向标签内容数组中添加输入框的内容，并重新生成canvas画布。

<html>

	<head>
		<title>blog</title>
		<meta http-equiv=content-type content="text/html; charset=utf-8">
		<link rel="stylesheet" href="css/style.css">
		<link href="css/blog.css" rel="stylesheet" type="text/css">
		<title>生命不息 折腾不止</title>

		 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<style> 
			body {
				border: 0px;
				margin: 0px;
				overflow: hidden;
				background-color: transparent;
				font-family: 宋体;
			}
		</style>
	</head>

	<body onselectstart="return false;">
		<script>
			$(function() {
				$("#drag").draggable();
				$("#myCanvas").droppable({
					drop: function(event, ui) {
					//	alert(ui.draggable.children()[0].value);
						c = document.getElementById("myCanvas");
					context = c.getContext("2d");
					context.clearRect(0, 0, c.width, c.height);
					data2[data2.length] = ui.draggable.children()[0].value; 
					draw();
					} 
				});
			});
		</script>
		<div class="img-col hover-me">
			<div class="img-wrap parallax-demo-4" style="float: left; width: 100%; height: 950px; margin: 0; padding: 0;">
				<div class="parallax-inner back-img" style="background-image: url('img/bg.jpg')">

				</div>
			</div>
		</div>

		<div class="mes">
			<canvas id="myCanvas" width="900" height="700" style="float: left; background: rgba(0,0,0,0.5); overflow: hidden; position: absolute; top:50px; left: 30px; ">
			</canvas>
			<div id="drag" style="float: left; background: rgba(0,0,0,0.5); overflow: hidden; position: absolute; top:50px; left: 950px;  width: 160px; height: 160px;">
				<input type="text" style="background: none; color: white;" placeholder="此处输入内容" />
			</div>
			<script type="text/javascript">
				var c = document.getElementById("myCanvas");
				var context = c.getContext("2d");
				// 设置字体
				/*var colorArr = [ //颜色选择
					'#3C6B15',
					'#6b4b38',
					'#eb9a2f',
					'#12acab',
					'#666',
				];*/
				var colorArr = ["Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue"];
				var data2 = ["数学建模", "Java", "直男", "代码", "图书馆", "PHP", "项目", "健康", "JS", 'html', 'CODE', 'MODE',
					'信息', '开发', '设计', '软件开发', '浏览器', '大学', '大三', '中国', '济南', '一般', '冷', '好', '我爱学习', '苟利国家生死以', '一川晚照人闲立', '新垣结衣', '石原里美',
				];

				function draw() {
					var width = 0;
					var height = 0;
					var maxsize = 0;
					var maxwidth = 100;
					for(var i = 0; i < 150; i++) {
						var size = Math.floor(15 + Math.random() * 28);
						context.font = size + "px " + "bold 黑体";
						// 设置颜色
						context.fillStyle = colorArr[Math.floor(Math.random() * 20)];
						// 设置对齐方式
						context.textAlign = "left";
						context.textBaseline = "top";
						var text = data2[Math.floor(Math.random() * data2.length)];
						if(width < 900) {
							context.fillText(text, width, height);
						}
						if(size > maxsize)
							maxsize = size;
						width += size * text.length;
						if(width > 800) {
							width = 0;
							height += maxsize;
							maxsize = 0;
						}
					}
				}
				window.onload = function() {
					draw();
				};

				function add() {
					c = document.getElementById("myCanvas");
					context = c.getContext("2d");
					context.clearRect(0, 0, c.width, c.height);
					data2[data2.length] = (document.getElementById('content').value);
					draw();
				}
			</script>
		</div>
		

</html>