getImageData(ox, oy, width, height)

最新推荐文章于 2022-08-26 16:54:12 发布

原创最新推荐文章于 2022-08-26 16:54:12 发布 · 776 阅读

0 ·

CC 4.0 BY-SA版权

canvas 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个基于HTML5 Canvas的动画实验，通过使用ctx.textBaseline调整文字基线，并利用getImageData API获取画布上的像素信息来创建动态效果。实验演示了如何通过分析文字图像数据生成动态下落的文字元素。

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

在《html5实验室-Canvas世界》中,看到了这个动画,发现了这个访问画布数据的API,感觉很有用.

这个实验中还有一个API : ctx.textBaseline = "top",这样文字的基坐标就从上到下了.

<!DOCTYPE html>
<html>
	<head>
		<title>获取画布点级信息</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script>
			var cvsData = {
				a : 9,//重力加速度
				r : 2,
				text : "节操",
				width : 500,
				height : 400,
				cyc : 30,

				bgFillStyle : "rgba(0, 0, 0, 0.3)",
				ballFillStyle : "rgba(255, 0, 0, 1)",
				textFont : "bolder 60px 宋体",
				//build by init()
				ctx : null,
				balls : [],
			}
			function init(){
				var cvs = document.createElement("canvas");
				cvs.height = cvsData.height;
				cvs.width = cvsData.width;

				var ctx = cvsData.ctx = cvs.getContext("2d");
				ctx.textBaseline = "top";

				ctx.fillStyle = "gba(0, 0, 0, 1)";
				ctx.fillRect(0, 0, cvsData.width, cvsData.height);
				ctx.fillStyle = cvsData.ballFillStyle;
				ctx.font = cvsData.textFont;
				ctx.fillText(cvsData.text, 20, 20);

				imageData = ctx.getImageData(20, 20, cvsData.width, cvsData.height);
				for(var i = 0; i < imageData.data.length; i += 4 * 2){
					if(imageData.data[i] > 0){
						cvsData.balls.push({
							x : i % cvsData.width,
							y : i / cvsData.width,
							r : cvsData.r,
							vx : (Math.random() - Math.random()) * 30,
							vy : Math.random() * 50
						});
					}
				}
				ctx.fillStyle = "#000000";
				ctx.fillRect(0, 0, cvsData.width, cvsData.height);
				document.body.appendChild(cvs);
				run();
			}

			function run(){
				var ctx = cvsData.ctx;
				ctx.fillStyle = cvsData.bgFillStyle;
				ctx.fillRect(0, 0, cvsData.width, cvsData.height);
				ctx.fillStyle = cvsData.ballFillStyle;
				for(var i in cvsData.balls){
					var ball = cvsData.balls[i];

					ctx.beginPath();
					ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2, false);
					ctx.closePath();
					ctx.fill();
					ball.x += ball.vx * cvsData.cyc / 1000;
					ball.y += ball.vy * cvsData.cyc / 1000;
					if(ball.y >= cvsData.height - 10 && ball.vy <= 2)
					{
						ball.vx = 0;
					}
					else if(ball.r + ball.y >= cvsData.height - 10 && ball.vy > 0){
							ball.vy *= -1 * Math.random();
					}
					else{
						ball.vy += cvsData.a;
					}
				}
			}

			function start(){
				document.body.removeChild(document.getElementById("start"));
				setInterval(run, cvsData.cyc);
			}
		</script>
	</head>
	<body onload="init()">
		<button id="start" onclick="start()">click me !</button>
		<br />
	</body>
<html>