小程序：利用canvas制作文字特效

先上一图，这个是最终效果：

再看看闪耀效果：

1、先将文字画在canvas；

2、利用getImageData()获取图像数据；

3、将图像数据中黑色（你可以用其他颜色）按一定间隔取值（获取坐标）；

4、在获取的坐标画矩形（你画其他形状也是可以的）；

5、使用requestAnimationFrame，变换矩形颜色。

这样就闪烁起来了~~

var i = 0

Page({

/ 页面的初始数据/data: {hideNav: false,colors: ["#fff", "#FF6E40", "#FFAB40", "#FFFF00", "#EEFF41", "#B2FF59", "#69F0AE", "#64FFDA", "#18FFFF", "#40C4FF", "#E040FB", "#FF4081", "#ff5252"],

text: '肖战',scroll: false,setting: false},

/ 生命周期函数--监听页面加载/onLoad: function (options) {let that = this, text = wxgetStorageSync('blinkText') || thisdatatext;thissetData({text})thisinit()},

init() {wxcreateSelectorQuery()select('#canvas')fields({node: true,size: true,})exec((res) => {let that = this,text = thisdatatextconst width = res[0]widthconst height = res[0]height

const canvas = res[0]nodeconst ctx = canvasgetContext('2d')const dpr = 1 //wxgetSystemInfoSync()pixelRatiocanvaswidth = width dprcanvasheight = height dprctxscale(dpr, dpr)i = (canvaswidth - thatgetByteLen(text) 100) / 2ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);ctxfont = "bolder 200px Arial";ctxfillStyle = 'black';ctxtextBaseline = 'top';ctxfillText(text, 0, 100);// ctxlineWidth = 5;// ctxstrokeText(text, 0, 100);let imageData = ctxgetImageData(0, 0, canvaswidth, canvasheight)data;// consolelog(imageData)

ctxfillStyle = "#ffffff";ctxfillRect(0, 0, canvaswidth, canvasheight);

thisdatacanvas = canvasthisdatactx = ctxthisdataimageData = imageDataconsolelog(canvaswidth, canvasheight)// thisdrawText()const renderLoop = () => {thisdrawText()

canvasrequestAnimationFrame(renderLoop)}// canvascancelAnimationFrame(renderLoop)canvasrequestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = thisdataif (scroll) {if (i >= canvaswidth) {i = -canvaswidth}i += 2}

ctxclearRect(0, 0, canvaswidth, canvasheight)for (var h = 0; h < canvasheight; h += gap) {for (var w = 0; w < canvaswidth; w += gap) {var position = (canvaswidth h + w) 4;var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2];

if (r + g + b == 0) {ctxfillStyle = thisdatacolors[Mathfloor(Mathrandom() thisdatacolorslength)];ctxfillRect(w + i, h, 5, 5);}}}

},toggleSetting() {thissetData({setting: thisdatasetting false : true})},setText(e) {

let that = thiswxcloudcallFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: edetailvalue},success(res) {consolelog('ContentCheck-res', res)if (resresultcode == 300) {consolelog(resresultmsg)wxshowToast({icon: 'none',title: resresultmsg,})thatsetData({'text': ''})} else {thatsetData({setting: false,'text': edetailvalue})thatinit()}},fail(err) {consolelog('ContentCheck-errxxxx', err)

}})

},getByteLen(str) {var len = 0;for (var i = 0; i < strlength; i++) {var length = strcharCodeAt(i);if (length >= 0 && length <= 128) {len += 1;} else {len += 2;}}consolelog('文字长度',len)return len;},donothing() {

},/ 生命周期函数--监听页面初次渲染完成/onReady: function () {

},

/ 生命周期函数--监听页面显示/onShow: function () {

},

/ 生命周期函数--监听页面隐藏/onHide: function () {

},

/ 生命周期函数--监听页面卸载/onUnload: function () {wxsetStorage({data: thisdatatext,key: 'blinkText',})},

/ 页面相关事件处理函数--监听用户下拉动作/onPullDownRefresh: function () {

},

/ 页面上拉触底事件的处理函数/onReachBottom: function () {

},

/ 用户点击右上角分享/onShareAppMessage: function () {

}})

node识别有颜色的部分

可以使用Nodejs的Canvas和Image模块来识别中有颜色的部分。Canvas模块可以将转换为画布，而Image模块可以从画布中读取数据，从而获取中每个像素的RGB值，从而判断该像素是否具有颜色。

下载源码或者针对问题对源码进行修改，或者引用新的js文件和css文件。

由于图层不是leaflet原生类，可以修改的参数也比较有限，但是在实际应用中，会根据实际会对聚合图层有一些自己的要求，但是却无法修改。

通过在leafletmarkercluster-srcjs搜索“large”，可以搜索到进行分段的相关代码。可见默认只对点数量聚合了三类，并且范围写死，100以上全部为红，导致数据量大展示效果十分不好。找到相应的代码就是可以改了，改起来也十分简单，如果要修改数量范围直接修改数字即可，如果要新加颜色样式可以添加else if (childCount 回答于 2022-04-20

canvas 的能力是通过 context 对象表现出来的，context一般称为绘图环境。

DOMString 为 "2d" 时，context 是 CanvasRenderingContext2D 对象；(本文重点)

DOMString 为 "webgl" 时，context 是 WebGLRenderingContext 对象；

DOMString 为 "webgl2" 时，context 是 WebGL2RenderingContext 对象；

DOMString 为 "bitmaprenderer" 时，context 是 ImageBitmap 对象；

CanvasRenderingContext2D 对象实例 instance 共有16个属性，只要设置了这些属性，就会影响 instance 调用绘制方法时的表现，常用的有：

注意：可使用 instance 的 save() 和 restore() 方法来临时修改 instance 的属性

1、一般用来保存数据，不展示在浏览器页面上，创建的两种方式：a、css 方式设置为 display:none；b、JS创建 documentcreateElement('canvas')；

2、与HTML结合使用：可以采用 CSS 定位的方式，将 HTML 元素置于 canvas 元素之上，比如：在 canva 上叠加一个 div panel 作为某个开关控制界面；选景橡皮筋；时钟等

3、也可使用两个 canvas，一个用来显示，另一个用来做数据准备和处理，这种方式通常效率高，但比较耗费内存

1、准备一个绘制背景的函数，用于每次擦除上一次绘制的结果

2、绘制辅助线

3、监听事件，做坐标转换 windowToCanvas

4、绘制内容的保存于恢复

5、三事件

onmousedown：保存初始 canvas 绘制状态

onmousemove: 更新位置信息，并不断调用初始 canvas 绘制状态来擦除上一个绘制

onmouseup: 调用初始 canvas 绘制状态来擦除上一个绘制，并根据onmousemove保存的信息做最终绘制，将结果绘制在 canvas 上

fillStyle 和 strokeStyle 可以是任意有效的css颜色值或者渐变色以及图像Pattern

canvas 某一时刻只能有一条路径存在，这条路径可以包含多条子路径。用 beginPath 来开始一条新路径或清除上一次子路径

textAlign: left,center,right

textBaseline: top,middle,bottom

1、三属性 font,textAlign,textBaseline

2、三方法 strokeText, fillText, measureText

strokeText(text,x,y,maxWidth) 指定文本超过maxWidth会被缩放

measureText(text)width 返回指定文本宽度

3、水平垂直居中

注意每次变换前，用 save 和 restore 来保存原来绘制上下文

1、由路径定义的一片区域，如一个三角形，矩形，圆形，然后调用 clip 即可得到剪辑区域

2、默认和 canvas 大小一致

3、设置剪辑区域后，浏览器将只对该区域进行绘制

4、调用clip会把剪辑区域设为当前剪辑区域与当前路径定义的区域的交集，故clip 的调用经常在 save 和 restore 之间，这是为了防止剪辑区域越来越小

主要是 drawImage,getImageData,putImageData,createImageData 四个 API

var A:TColor;

begin

  a:=CanvasPixels[100,100];

  ShowMessage(ColorToString(a)); //显示颜色名称

  //ShowMessage(IntToHex(ColorToRGB(a),8));  //显示颜色的十六进制值

end;

以上就是关于小程序：利用canvas制作文字特效全部的内容，包括:小程序：利用canvas制作文字特效、node识别图片有颜色的部分、canvas 修改leaflet图层颜色等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！