微信小程序 Canvas做手持弹幕的一个发现

实现效果:

        




<!--pages/gogogo/gogogo.wxml-->
<canvas canvas-id='firstCanvas' style='position:absolute;z-index:25;width:100%;height:100%;'></canvas>
<canvas canvas-id='secondCanvas' style='position:absolute;z-index:100;width:100%;height:100%;' bindtouchstart='stopIt' ></canvas>



// pages/gogogo/gogogo.js
var timer;

Page({

/**
* 页面的初始数据
*/
data: {
pageH : 0,
pageW : 0,
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (e) {
//获取之前页面穿过来的颜色、速度、文字
var rgb = e.rgb;
var speed = 61-e.timer;
var text = e.name;
var _this = this;
wx.getSystemInfo({
success: function (res) {
_this.setData({
pageH: res.windowHeight,
pageW: res.windowWidth,
})
}
});
//创建背景画布
const ctx = wx.createCanvasContext('firstCanvas');
// Create linear gradient
const grd = ctx.createLinearGradient(0, 0, this.data.pageW, 0);
ctx.setGlobalAlpha(0.6);
grd.addColorStop(0, 'rgb' + rgb + '');
grd.addColorStop(0.3, 'rgb(0,0,0)');
grd.addColorStop(0.7, 'rgb(0,0,0)');
grd.addColorStop(1, 'rgb' + rgb + '');
// Fill with gradient
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, this.data.pageW, this.data.pageH);
ctx.draw(true);

//定义文字移动的坐标
var x_position = 0;
var that = this;
timer = setInterval(function(){
//secendCanvas 文字的画布
var sec = wx.createCanvasContext('secondCanvas');
//坐标系移动
sec.translate(parseInt(that.data.pageW * 0.6), 0);
//逆时针旋转90度 让文字横屏
sec.rotate(-0.5 * Math.PI);
//文字宽度 中间横条0.4倍屏幕宽
sec.setFontSize(parseInt(that.data.pageW * 0.3));
//获取文字长度
var txtwidth = sec.measureText(text).width;
sec.setFillStyle('rgb' + rgb + '');
sec.save()
if (x_position < -txtwidth - that.data.pageH){
x_position = 0;
}
sec.fillText(text, x_position--, 0);
sec.stroke();
sec.draw();
sec.restore();
},speed);
},

stopIt: function () {
clearInterval(timer);
},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
clearInterval(timer);
},

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



其中有的一个问题是: 小程序的Canvas在使用setInterval一直刷新时,每一次都要重新创建画布,即

var sec = wx.createCanvasContext('secondCanvas');
这一行每一次都要走,不然开发工具上有效果,但真机上没有效果。

从网上看来的原因是,小程序的canvas里的context 与canvas 并不是一对一的。而是context只记录了一些actions操作,并不是指向唯一的canvas。 我们需要在drawCanvas里将上下文与canvas绑定起来。
展开阅读全文

没有更多推荐了,返回首页