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

小程序:利用canvas制作文字特效,第1张

先上一图,这个是最终效果:

再看看闪耀效果:

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 = wx.getStorageSync('blinkText') || this.data.textthis.setData({text})this.init()},

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

const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = 1 //wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)i = (canvas.width - that.getByteLen(text) * 100) / 2ctx.fillStyle = "#ffffff"ctx.fillRect(0, 0, canvas.width, canvas.height)ctx.font = "bolder 200px Arial"ctx.fillStyle = 'black'ctx.textBaseline = 'top'ctx.fillText(text, 0, 100)// ctx.lineWidth = 5// ctx.strokeText(text, 0, 100)let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data// console.log(imageData)

ctx.fillStyle = "#ffffff"ctx.fillRect(0, 0, canvas.width, canvas.height)

this.data.canvas = canvasthis.data.ctx = ctxthis.data.imageData = imageDataconsole.log(canvas.width, canvas.height)// this.drawText()const renderLoop = () =>{this.drawText()

canvas.requestAnimationFrame(renderLoop)}// canvas.cancelAnimationFrame(renderLoop)canvas.requestAnimationFrame(renderLoop)})},drawText() {var gap = 7,{imageData,canvas,ctx,text,scroll} = this.dataif (scroll) {if (i >= canvas.width) {i = -canvas.width}i += 2}

ctx.clearRect(0, 0, canvas.width, canvas.height)for (var h = 0h <canvas.heighth += gap) {for (var w = 0w <canvas.widthw += gap) {var position = (canvas.width * h + w) * 4var r = imageData[position],g = imageData[position + 1],b = imageData[position + 2]

if (r + g + b == 0) {ctx.fillStyle = this.data.colors[Math.floor(Math.random() * this.data.colors.length)]ctx.fillRect(w + i, h, 5, 5)}}}

},toggleSetting() {this.setData({setting: this.data.setting ? false : true})},setText(e) {

let that = thiswx.cloud.callFunction({name: 'msgSecCheck',data: {op: 'textCheck',content: e.detail.value},success(res) {console.log('ContentCheck-res', res)if (res.result.code == 300) {console.log(res.result.msg)wx.showToast({icon: 'none',title: res.result.msg,})that.setData({'text': ''})} else {that.setData({setting: false,'text': e.detail.value})that.init()}},fail(err) {console.log('ContentCheck-errxxxx', err)

}})

},getByteLen(str) {var len = 0for (var i = 0i <str.lengthi++) {var length = str.charCodeAt(i)if (length >= 0 &&length <= 128) {len += 1} else {len += 2}}console.log('文字长度',len)return len},donothing() {

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

},

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

},

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

},

/*** 生命周期函数--监听页面卸载*/onUnload: function () {wx.setStorage({data: this.data.text,key: 'blinkText',})},

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

},

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

},

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

}})

微信小程序中有一个功能是canvas画布功能,那么这个功能该怎么用呢?下面的教程就是关于微信小程序的canvas画布功能怎么用的,一起来看看吧。

携高薯微信小程序中有一个功能是canvas画布功能,那么这个功能该怎么用呢?下面的教程就念散是关于微信小程序的canvas画布功能怎么用的,一起来看看吧。辩者

canvas画布,你可以理解为有一张白布,你可以在画布上画出不同形状、颜色、粗细的图形。

最近有一个需求说是需要换图片颜色。

最后其实给我拒绝了,因为我说很难实现。但是心中还是上心了。

下面是替换颜色的方法。效果还行吧旦冲粗。一般般

主要代码还是copy别人的。这里就写一下,当记录

1、canvas的getImageData所生成的图片组成

根据循环可以得出

图片组成是ARGB格式,第一个是透明度,后续rgba

2、得出的图片循环需要按4的倍数进行循环,否则至少是卡死的地步

for (var j = 0j <pdata.lengthj+=4) { if (pdata[j] === 95) pdata[j] = colorArr[0] if (pdata[j - 1] === 170) pdata[j-1] = colorArr[1] if (pdata[j - 2j] === 129) pdata[j-2] = colorArr[2]} 复制代码

3、注意替换颜色应该是倒序

所以0,1,2,3的顺序

替换的rgb颜色应该是3,2,1

得到数组rgb:data[i],data[i-1],data[2]

替换方式看上面代码

4、完整代码格式

<!DOCTYPE html><模镇html><style> #btn { width: 100pxheight: 50pxbackground: coralposition: fixedtop: 0 } </style><head> <script type="text/javascript">var c, ctx,myImagefunction displayImage() { myImage = new Image() myImage.src = "1719ebbc83be39f0.webp.jpg" c = document.getElementById("myCanvas") if (c.getContext) { ctx = c.getContext("2d")myImage.onload = function() { ctx.drawImage(myImage, 0, 0)} } } //colorArr 替换后的颜色 // 替换前的颜色 function getColorData(colorArr, color2) { imageD = ctx.getImageData(0, 0, myImage.width, myImage.height) var pdata = imageD.data for (var j = 0j <pdata.lengthj+=4) { if (pdata[j] === color2[0]) pdata[j] = colorArr[0]if (pdata[j + 1] === color2[1]) pdata[j + 1] = colorArr[1]if (pdata[j + 2] === color2[2]) pdata[j + 2] = colorArr[2] } ctx.putImageData(imageD, 0, 0)} function colorChange() { // rgb颜色 getColorData([102, 51, 153], [95, 170, 129])} <判源/script></head><body onload="displayImage()"><p>原始图片:</p><img id="myPhoto" src="1719ebbc83be39f0.webp.jpg"><p>Canvas图片:</p><canvas id="myCanvas" width="200" height="200"></canvas><button id="btn" onclick="colorChange()">变颜色啦!</button></body></html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12408250.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存