<page> <canvas canvas-id="myCanvas" style="width:750rpx;height:1334rpx"/> </page> // pages/demo1/demo1.js var app = getApp() Page({
/** * 頁面的初始數據 */ data: { Height: app.dataMode.systemInfo.windowHeight, width: app.dataMode.systemInfo.windowWidth, covers: [], sharelist: [{ url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg', x: 325, y: 70, width: 100, height: 100 }, { url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg', x: 80, y: 316, width: 590, height: 392 }, { url: 'http://pic10.photophoto.cn/20090103/0033034092630078_b.jpg', x: 295, y: 911, width: 160, height: 160 }, ], },
/** * 生命周期函數--監聽頁面加載 */ onLoad: function(options) { this.getQaImageInfo(0) },
/** * 生命周期函數--監聽頁面初次渲染完成 * number dx圖像的左上角在目標 canvas 上 x 軸的位置number dy圖像的左上角在目標 canvas 上 u 軸的位置 * number dWidth在目標畫布上繪制圖像的寬度，允許對繪制的圖像進行縮放number dwidth在目標畫布上繪制圖像的高度，允許對繪制的圖像進行縮放 * number x繪制文本的左上角 x 坐標位置number y繪制文本的左上角 y 坐標位置 */
onReady: function() {
},

/** * 生命周期函數--監聽頁面顯示 */ onShow: function() {
},
/** * 生命周期函數--監聽頁面隱藏 */ onHide: function() {
},
/** * 生命周期函數--監聽頁面卸載 */ onUnload: function() {
},
/** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function() {
},
/** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function() {
},
/** * 用戶點擊右上角分享 */ onShareAppMessage: function() {
},
getQaImageInfo: function(i) { var that = this; if (i < this.data.sharelist.length) { console.log(that.data.sharelist[i].url) wx.getImageInfo({ src: that.data.sharelist[i].url, success: function(res) { var covers = that.data.covers covers.push(res.path); console.log(res.path); that.setData({ covers: covers }) that.getQaImageInfo(i + 1) }, fail: function(res) { wx.hideLoading() wx.showToast({ title: '獲取圖片失敗', icon: 'none', image: '/image/error.png' }) } }) } else { that.drawImage(); } },
drawImage: function() { var width = this.data.width; var w = this.data.width / 2; var height = this.data.Height; var pixelRatio = width / 750; const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('#D6564D') ctx.fillRect(0 * pixelRatio, 0 * pixelRatio, 750 * pixelRatio, 1344 * pixelRatio)
ctx.setFillStyle('white') ctx.fillRect(40 * pixelRatio, 276 * pixelRatio, 670 * pixelRatio, 1033 * pixelRatio) for (var i = 0; i <= this.data.sharelist.length - 1; i++) { ctx.drawImage( this.data.covers[i], this.data.sharelist[i].x * pixelRatio, this.data.sharelist[i].y * pixelRatio, this.data.sharelist[i].width * pixelRatio, this.data.sharelist[i].height * pixelRatio )
ctx.setFontSize(28 * pixelRatio) ctx.setFillStyle("#FFFFFF") ctx.fillText('偷月亮的meOw', 278 * pixelRatio, 219 * pixelRatio) ctx.setFontSize(38 * pixelRatio) ctx.setFillStyle("#333333") ctx.fillText('發起了一個抽獎活動', 80 * pixelRatio, 762 * pixelRatio) ctx.setFontSize(30 * pixelRatio) ctx.setFillStyle("#BBBBBB") ctx.fillText('02月16日 11:30 自動開獎', 80 * pixelRatio, 817 * pixelRatio) ctx.fillText('長按識別小程序，參與抽獎', 196 * pixelRatio, 1125 * pixelRatio) ctx.fillText('抽獎說明：祝你好運氣，中獎的朋友記得在', 81 * pixelRatio, 1214 * pixelRatio) ctx.fillText('聯系信息留下你的微信號哦！', 80 * pixelRatio, 1254 * pixelRatio)

//定義直線的起點坐標為(10,10) ctx.setLineDash([3, 3]); ctx.moveTo(41 * pixelRatio, 875 * pixelRatio); //定義直線的終點坐標為(50,10) ctx.lineTo(710 * pixelRatio, 875 * pixelRatio); //沿著坐標點順序的路徑繪制直線 ctx.lineWidth = 1 * pixelRatio; ctx.strokeStyle = "#DDDDDD"; ctx.stroke() } ctx.draw(true, setTimeout(function() { wx.canvasToTempFilePath({ x: 0, y: 0, width: 750, height: 1334, destWidth: 750, destHeight: 1334, canvasId: 'myCanvas', fileType: 'jpg', success: function(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, }) } }) }, 1000)) wx.showToast({ title: '分享圖片生成中...', icon: 'loading', duration: 1000 }); } })

轉載于:https://www.cnblogs.com/ylblogs/p/9670446.html

總結

以上是生活随笔為你收集整理的一个完整的canvas画图的全部內容，希望文章能夠幫你解決所遇到的問題。

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