實現效果：

????????

<!--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.jsvar 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 gradientctx.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綁定起來。

總結

以上是生活随笔為你收集整理的微信小程序 Canvas做手持弹幕的一个发现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。