canvas弹幕方式从下往上~匀速直线运动~初版_canvas 绘制文本上下滚动-CSDN博客

本文介绍了一个使用HTML5 Canvas实现的匀速直线运动演示案例。通过JavaScript编程，该案例展示了如何让文本沿画布垂直方向进行匀速移动，并通过定时器不断更新位置。文章包含了完整的HTML文件代码，便于读者理解和实践。

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

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>canvas匀速直线运动</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			canvas {
				border: 1px solid #ddd;
				margin: 10px;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas">你的浏览器不支持canvas，请跟换其他浏览器试一试</canvas>
		<script>
			var t = ""; //循环定时器
			var inputval = "请输入文本啊66";
			var boxheight = ""; //要运动物体高度的高度
			var cwidth = "";
			var cheight = "";
					var startPoint = "" //运动距离
			window.onload = function() {
				var canvas = document.getElementById('canvas');
				cwidth = canvas.width = 375;         
				cheight = canvas.height = 590;
				var context = canvas.getContext('2d'); //获得画笔
				context.translate(canvas.width / 2, 0)//移动位置
				context.rotate(Math.PI / 2);//旋转角度-180°~180°
				context.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
				context.textBaseline = 'middle'; //在绘制文本时使用的当前文本基线
				context.fillText(inputval, canvas.height, '0'); //文字及位置(context.font要先设置)
				startPoint = canvas.height;
				boxheight = context.measureText(inputval).width//获取文本水平排列时的宽度
				t = setInterval(function() {
					run(context);
				}, 15);
			};

			function run(cxt) {
				var speed = -1; //每次移动的单位距离
				var clearcwidth = cwidth / 2
				cxt.clearRect(0, -clearcwidth, cheight, cwidth); //清除画布
				startPoint += speed;
				cxt.beginPath();
				cxt.fillStyle = '#000'; //设置笔触的颜色
				cxt.font = "bold 40px '字体','字体','微软雅黑','宋体'"; //设置字体（）
				console.log(startPoint);
				console.log(boxheight);
				if(startPoint <= -boxheight) {
					startPoint = cheight
				}
				cxt.fillText(inputval, startPoint, '0'); //文字及位置(context.font要先设置)
			}
		</script>
	</body>

</html>