你的位置:首页 > 网页设计

[网页设计]Canvas实现文字粒子化,并且绕轴旋转(初号机)


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

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

<!DOCTYPE html><html ="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>