js滚动数字

最新推荐文章于 2025-06-06 09:15:08 发布

原创最新推荐文章于 2025-06-06 09:15:08 发布 · 676 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了使用JS Canvas实现滚动数字的方法，包含准备一张图片、编写HTML代码和JS代码，最后展示了效果图。

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

js canvas滚动数字

准备一张图片

在这里插入图片描述

html代码

	<!-- canvas的宽高应等于一个数字的宽高 -->
	<canvas id="canvas" width="33" height="48"></canvas>
	<button onclick="numScroll(3)">点3</button>

js代码

	function numScroll(num) {
    var img = new Image();
    img.src = "./number1.png";
    //在图片载加完成后执行
    img.onload =function(){
    	console.log("i'm work");
    	//创建一个2d的canvas
	var canvas = document.querySelector("#canvas");
	var ctx =canvas.getContext('2d');
	var imgtimer =0;
		//创建定时器生成滚动动画
    	 var timer = requestAnimationFrame(function t1(){
    	 		//调成动画持续时间 如果像延长时间 把timer< 的值改大
			    if (timer<40) {
			    	//一个数字高58
			    	imgtimer = imgtimer+58;
			    	//如果到达图片底部从图片头重新执行
			    	if (imgtimer>58*num) {
			    		imgtimer =0;
			    	}
                    ctx.clearRect( 0, 0, canvas.width, canvas.height );
                    //图片是竖向的所以这么写，如果是横向的就写成ctx.drawImage(img,-imgtimer,0);
                    ctx.drawImage(img,0,-imgtimer);
                    //进行递归执行
                    timer =requestAnimationFrame(t1)
			    }else{
			    //动画结束 生成指定的数字图片
			    	ctx.drawImage(img,0,-58*num);
			    	//删除定时器
			    	cancelAnimationFrame(timer);
			    }
			});
    };	
}

效果图

在这里插入图片描述