Canvas实现文字粒子化,并且绕轴旋转(初号机)

时间:2022-04-21 20:44:02

写下来发现,程序在细节上处理的很差,比如旋转的时候,在终点处有明显的撞墙感觉,以及小部分粒子存在精度差异,导致撞击后不与整体平衡。

注释全在代码中了,就不多说了,另外感觉写的旋转的规则有点怪,后续再调整吧。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test0901</title>
</head>
<body>
<canvas id="particle" width="500" height="300" style="border:1px solid"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("particle");
var ctx = canvas.getContext("2d");
var dots = [];//定义数组,用于存放后续的坐标(x,y)
var space = [];
var pos = {
x: 250,
y: 100
};
function line(x) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 300);
ctx.strokeStyle = "rgb(69,69,69,0.5)";
ctx.stroke();
}
var j = []; //var pattern;
//var image = new Image();
//image.onload = function (e) {
// pattern = ctx.createPattern(image, "repeat");
//}
//image.src = "doge.jpg";
function init() {
ctx.beginPath();
ctx.font = "100px Arial";
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillText("TCG",150,150);
//ctx.fillStyle = pattern;
//ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill();//画一个文字,颜色就随意,a值尽量高点
var img = ctx.getImageData(0, 0, canvas.width, canvas.height);//getImageData,专门用于获取图片数据,这里直接取了整个Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画布,就是把之前的文字清空,因为后面要以粒子(应该叫小圆圈)代替
for (var y = 0; y < img.height; y +=3) {//y+=3,是因为如果按像素取,有效值非常多,所以这里就每隔3像素取一点
for (var x = 0; x < img.width; x +=3) {//y是高,x是宽
var i = (x + y * img.width)*4;//这边就从左往右,从上往下;500X300的大小,会取166×100个像素点;×4则是因为rgba()
var dot = {
x: 0,
y: 0
};
if (img.data[i + 3] >= 228) {//因为img.data中包含了每个像素点的rgba,+3表示取a的值
dot.x = x;
dot.y = y;
dots.push(dot);//将每个满足条件的xy Add到dots数组中 }
}
} for (var m = 0; m < dots.length; m ++) {//遍历数组,将每个数组的xy以圆的方式展出
//document.write(dots[m].x + "&nbsp;" + dots[m].y + "</br>");//瞄一瞄每个坐标
space[m] = pos.x - dots[m].x;
ctx.beginPath();
ctx.arc(dots[m].x, dots[m].y, 1, 0, Math.PI * 2, true);
ctx.fill();
j[m] = 0;
} } /*以下瞎写*/
function rotate() {
for (var i = 0; i < dots.length; i++) {
var spc = space[i];
var spc1 = Math.abs(spc);
var dot = dots[i];
if (j[i] <= 2 * spc1) {
dot.x = dot.x + spc / 200;
j[i] += spc1 / 200;
}
else {
j[i] = 0;
spc = -spc;
space[i] = spc;
}
draw(dot.x, dot.y);
}
}
function draw(x, y) {
ctx.beginPath();
ctx.arc(x, y, 1, 0, Math.PI * 2, true);
ctx.fill();
}
function clean() {
ctx.clearRect(0, 0, canvas.width, canvas.height); }
setInterval(function () {
clean();
line(pos.x);
rotate(); }, 10);
window.onload = ("load", init(), true);
</script>
</body>
</html>