Canvas实现文字粒子化，并且绕轴旋转（初号机）
写下来发现，程序在细节上处理的很差，比如旋转的时候，在终点处有明显的撞墙感觉，以及小部分粒子存在精度差异，导致撞击后不与整体平衡。
注释全在代码中了，就不多说了，另外感觉写的旋转的规则有点怪，后续再调整吧。
<!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 + " " + 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>
