再看看闪耀效果:
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 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas下面全是我一点点测试出的干货,耐心看:
1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式,可以理解为他就是个框吧;
2.wxcanvas不要当成真的H5canvas,就当它是个div就行,画出范围的东西也是存在的,改变width,height就显示出来了,或者说这里有重绘,但具体如何实现的不知道;
3.改变wxcanvas的style的width,height,并不改为原画布上的东西的大小;
4.css transform变换中的变大缩小也无法改变原画布上的东西大小
5.官方说法:context只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于皮斗多个<canvas/>。
实际上,context.getActions()后,context中的信息会被清空,如果想重复利用,需要var temp=context.getActions()将 *** 作数组保存下来,才可重复用于wx.drawcanvas;
6.注意
wx.drawCanvas({canvasId: 'target',actions: context.getActions()})
默认会清空备滚画布,想不清空需要
wx.drawCanvas({ canvasId: 'target', actions: context.getActions(), reserve:true})
7.《重点》
<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas-id="target" id="target" style='width:{{width}}pxheight:{{height}}px'></canvas>
注意,disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动,catchtouchmove是不行的
上面的写法,ccvsMove和cvsMove会都触发,
ccvsMove返回的是普通touch事件对象,有pageX,clientX等,
cvsMove返回的是canvasTouch事件对象,没燃滚磨有pageX,clientX,只有x,y
8.
wx.drawCanvas({ canvasId: 'target', actions: [], reserve:false})
可以清空画布和画布的状态
9.画布的scale tranlate rotate等状态,在reserve:true时会接着上次的状态
10. context.getActions()返回的数组很有用,打印出来你会发现里面的内容你都能看懂,可以直接修改数组改变画的动作
11.wx.drawCanvas时context.drawImage在手机上可以画出来,在电脑开发工具上画不出来
12.wx.canvasToTempFilePath
官方文档中只有一行,原来
wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;wx.canvasToTempFilePath({ canvasId: 'target', success: function success(res) { wx.saveFile({ tempFilePath: res.tempFilePath, success: function success(res) {console.log('saved::' + res.savedFilePath) }, complete: function fail(e) {console.log(e.errMsg) } })}, complete: function complete(e) { console.log(e.errMsg)}})
Canvas 组件表示屏幕上一个空白矩形区域,应用程序可以在该区域内绘图,或者可以从该区域捕获用户的输入事件晌册御。应用程序必须为 Canvas 类创建子类,以获得有用的功能(如创建自定义组件)。必须重写paint 方法,以便在 canvas 上执行自定义宴岩图形。
举例:
Panel.add(new MyCanvas())//往panel中添加画布canvas
class MyCanvas extends Canvas {//定义一个canvas
public MyCanvas () {
setBackground (Color.GRAY)//设置背景为灰色
setSize(300, 300)//定义canvs大小是300*300
}
public void paint (Graphics g) {//姿雀画布的paint方法,
Graphics2D g2
g2 = (Graphics2D) g
g2.drawString ("It is a custom canvas area", 70, 70)//屏幕输出该字符串
}
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)