程序员的小浪漫----文字粒子效果

正文

请到「今天看啥」查看全文

ShapeBuilder = { //初始化字的对齐方式等，我认为middle 与 center比较好计算一点 init(width, height){ this .width = width; this .height = height; this .ctx = cache.getContext( '2d' ); this .ctx.textBaseline = 'middle' ; this .ctx.textAlign = 'center' ; }, //获取位置之前必须先要写入文字。 这里的size=40是默认值 write(words, x, y, size = 40 ){ //清除之前写的字。 this .ctx.clearRect( 0 , 0 , this .width, this .height); this .font = `bold ${size} px Arial` ; this .ctx.fillText(words, x, y); //记录当前文字的位置，方便计算获取像素的区域 this .x = x; this .y = y; this .size = size; this .length = words.length; }, getPositions(){ //因为imgData数据非常的大，所以尽可能的缩小获取数据的范围。 const xStart = this .x - ( this .length / 2 ) * this .size, xEnd = this .x + ( this .length / 2 ) * this .size, yStart = this .y - this .size / 2 , yEnd = this .y + this .size / 2 , //getImageData(起点x, 起点y, 宽度, 高度); data = this .ctx.getImageData(xStart, yStart, this .size * this .length, this .size).data; //间隔 （下面有介绍） const gap = 4 ; let positions = [], x = xStart, y = yStart; for ( var i = 0 ;i < data.length; i += 4 * gap){ if (data[i+ 3 ] > 0 ){ positions.push({x, y}); } x += gap; if (x >= xEnd){ x = xStart; y += gap; i += (gap - 1 ) * 4 * (xEnd - xStart); } } return positions; } } ShapeBuilder.init();

关于 gap ：在循环 imgData 数组的时候，数据量太大可能会造成 卡顿 ，所以可以使用间隔来获取坐标点的方法。不过可能会造成文字部分地方 缺失 。就需要个人来权衡利弊，自己来调整了。

gap 的值必须能被 xEnd-xStart 给整除，不然会造成获取坐标点错位的后果。

请到「今天看啥」查看全文