小程序：利用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 () {

}})

1、背景设置可以用服务器上的。

2、也可以将本地转成base64的。

wxml:

<view class="topview-left" style="background-image: url({{background}});mode='scaleToFill'"/>

js:

data: {

    background: "/style/images/icon_coupon_backgroudpng",

  },

/

  生命周期函数--监听页面加载

  /

  onLoad: function(options) {

    //设置背景

    let base64 = wxgetFileSystemManager()readFileSync(thisdatabackground, 'base64');

    thissetData({

      'background': 'data:image/png;base64,' + base64

    });

    //设置导航栏标题

    wxsetNavigationBarTitle({

      title: '下发优惠券'

    });

  },

wxss:

topview-left {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 30%;

  height: 113px;

  background-repeat: no-repeat; / 不重复/

  background-size: 100% 100%;

  background-image: url('data:image/png;base64,base64码'); / 添加背景的/

}

3、也可以直接设置定位实现。

         <view style="display: flex; align-items: center;text-align:center;justify-content: center;margin-bottom:10px;">

               <image src="/pagesChronic/images/icon_case_backgroundpng" style="height:26px;width:167px;position:absolute;"></image>

                <text style="position: relative;color:#FF9721;">评价</text>

           </view>

效果：

小程序大缺少右边线的解决方法：用1张2倍图做适配。

1、通过动态设置image宽高来实现：先在data中用变量表示小图标初始宽高，并绑定到image组件上。

2、再通过wxgetSystemInfo获取手机可使用窗口宽度，那么小图标的宽度=原宽屏宽/设计图宽，长=原长屏宽/设计图宽，再用thissetData()修改变量。

1、在微信开发者工具中，打开appjson文件，在pages数组中增加showwxml页面相关文件的代码，以加粗显示，代码如下：

{

"pages":[

"pages/index/index",

"pages/show/show",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#ccc",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

2、在indexwxml文件中，在类为usermotto的view组件中添加绑定属性catchtap='enterShow'，以加粗显示，代码如下：

<!--indexwxml-->

<view class="container">

<view class="userinfo">

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfoavatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfonickName}}</text>

</block>

</view>

<view class="usermotto" catchtap='enterShow'>

<text class="user-motto">{{motto}}</text>

</view>

</view>

3、在indexjs文件中，将data中motto的值改为“点击进入”。编写实现跳转的自定义函数enterShow，加粗显示，代码如下：

//indexjs

//获取应用实例

const app = getApp()

Page({

data: {

motto: '点击进入',

userInfo: {},

hasUserInfo: false,

canIUse: wxcanIUse('buttonopen-typegetUserInfo')

},

//事件处理函数

enterShow:function(){

wxnavigateTo({

url: '/show/show',

})

4、 在showwxml中，输入跳转后页面显示的信息，代码如下：

<view>

<text>这是跳转后的页面</text>

</view>

5、然后在indexxwml中点击测试就可以了。

说明：在上面的页面跳转自定义函数enterShow中，也可以使用wxredirectTo实现跳转。两者的区别:redirectTo将关闭当前页面，跳转到指定页面，页面左上角没有返回的箭头按钮；而navigateTo将保留页面，跳转到指定页面，页面左上角有返回的箭头按钮。

其实在小程序后台很早就有个wxopenUrl的函数，普通开发者没有调用权限，这次微信给自家的小程序开放权限，旨在测试这一功能可能的风险。因为这一功能如果全部开放，将会给小程序用户带来很大的安全隐患。居心不良的开发者可能会将用户引流至一些不安全页面。

小程序的审核难度也会变得很大。因为微信除了审核小程序本身的页面跳转和内容，还需要审核外链的链接，并且还不一定能够审核清楚。

以上就是关于小程序：利用canvas制作文字特效全部的内容，包括:小程序：利用canvas制作文字特效、微信小程序 本地背景图片设置、小程序大图片缺少右边线等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！