本文介紹了canvas 微信海報分享，分享給大家，具體如下：

隨機產(chǎn)生一張圖片

拿到微信用戶的頭像和稱呢（自己調(diào)后端的接口獲取）

把用戶頭像和稱呢和隨機產(chǎn)生一張圖片合成一張海報

可能上一頁用戶還有填入的心愿文本也要填入圖片中

實現(xiàn)效果圖

記錄下在實現(xiàn)功能過程中遇到的問題

canvas在微信瀏覽器中長按無效不能像img一樣長按分享（那我就轉(zhuǎn)成img唄）

轉(zhuǎn)成img后在微信開發(fā)者工具中能顯示，真機無效（欲哭無淚），度娘說可能是圖片跨域^-^

用戶頭像合成還要圓角，我表示不會啊，直接看canvas api文檔了對度娘無愛了

canvas填入文字超過指定寬度也要換行，我表示只知道不超多指定寬度的各種文字對齊方式 ctx.textAlign = center

canvas在高清屏下模糊的問題（超簡單的不知道度娘怎么會那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatio

HTML結(jié)構(gòu)

 p >
CSS
 style  margin:0; padding:0; body, html { width: 100%; height: 100%; .imgBox { width: 100%; height: 100%; img { width: 100%; display: block; /style 
script
// js主要結(jié)構(gòu)new Vue({ el: imgBox , data:{ urlParam: {},//獲取url中的傳值對象 randomNum: 1,//隨機數(shù)用于確定那個祈福頁 userName: ,//用戶稱呢 imgSrc: ,//合成最終圖片 userImg: ,//用戶頭像圖片 userMessage: ,//用戶留言 methods: { // 分享到盆友圈 wxShareFriends: function () {}, // 初始化請求頭 wxhttp: function () { $.ajaxSetup({ headers: { X-CSRF-TOKEN : $( meta[name= csrf-token ] ).attr( content ) // 獲取隨機數(shù)[1,10] randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) // 獲取微信用戶頭像和稱呢和用戶輸入祝福語 getUserInfo() { var vm = this; $.post( API請求地址 , function (data) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; if (vm.randomNum % 2 == 0) { vm.userMessage= 紅塵相遇，年華已老。歲月花開多少不在，古往今來相遇是一件既微妙。而又神圣的事情，紅塵的情網(wǎng)中  } else { vm.userMessage = 紅塵相遇，年華已老  vm.$nextTick(function () { vm.drawCanvasBgImg(); // 獲取頁面dpr和寬度 getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth; else { windowInfo.width = document.body.clientWidth; return windowInfo; // 畫活動頁分享背景大圖 drawCanvasBgImg () {}, // 在背景圖片的畫布上截取一個圓然后填充入用戶頭像 drawCanvasUserImg(canvas, ctx, dpr) {}, // 填寫用戶稱呢或者用戶留言 canvasFillText (canvas, ctx, dpr, circleR) {}, // 合成base64位分享圖 convertCanvasToImage (canvas) { this.imgSrc = canvas.toDataURL( image/jpeg //png有毒在安卓機下識別二維碼無法跳轉(zhuǎn) this.$Spin.hide();})
畫圖方法步驟
drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
convertCanvasToImage (canvas)
畫活動頁分享背景大圖 drawCanvasBgImg ()
//拿到數(shù)據(jù)后開始畫背景大圖 想法很簡單就是把圖片畫到canvas中然后在畫布上再畫頭像文字讓后轉(zhuǎn)成img drawCanvasBgImg () { var vm = this; var canvas = document.createElement( canvas  var ctx = canvas.getContext( 2d  var clientWidth = this.getWindowInfo().width;??//獲取屏幕寬度用于canvas寬度自適應移動端屏幕 var dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop //** 坑鋸齒感覺沒什么用不知道是不是用錯地方了 ** canvas.width = dpr * clientWidth;??//由于手機屏幕時retina屏，都會多倍渲染，用dpr來動態(tài)設置畫布寬高，避免圖片模糊 canvas.height = dpr * clientWidth * 609 / 375;//去掉微信頭部的狀態(tài)欄應該是603 沒搞懂603還是不能讓圖片滿屏直接多加到了609 var img = new Image(); img.crossOrigin = //死坑的圖片跨域 （img.crossOrigin = Anonymous 這種寫法還是不能顯示base64格式圖片） img.src = http://xxx + this.randomNum + .jpg  img.onload = function () { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr);},
用戶頭像 drawCanvasUserImg (canvas, ctx, dpr)
// 在背景圖片的畫布上截取一個圓然后填充入用戶頭像drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; var circleR = 50 * dpr;//半徑 var circleX = canvas.width / 2;//圓心X坐標 var circleY = 50 * dpr;//圓心Y坐標 var imgX = circleX - circleR;//圖片X開始坐標 var imgY = circleY - circleR;//圖片Y開始坐標 var imgWidth = 2 * circleR;//圖片按圓形大小 var img = new Image(); img.crossOrigin =  img.src = this.userImg; img.onload = function () { ctx.save(); // 保存當前ctx的狀態(tài) ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //畫出圓 ctx.clip(); //裁剪上面的圓形 ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在剛剛裁剪的園上畫圖 ctx.restore(); // 還原狀態(tài) vm.canvasFillText(canvas, ctx, dpr, circleR);},
在canvas中畫文字
// 填寫用戶稱呢或者用戶留言canvasFillText (canvas, ctx, dpr, circleR) { var fontSizeThis = dpr * 20 + px + Arial  var userNameY = 0;//用戶名Y軸坐標 var userMessageX = dpr * 40;//用戶留言X軸坐標 var userMessageY = 0;//用戶留言Y軸坐標 var lastSubStrIndex = 0;//字符串下標 var lineWidth = 0;//一行寬度 var allTextWidth = 0;//所有字符寬度 ctx.font = fontSizeThis; // 需要用戶名是寫入用戶名 if (this.userName) { userNameY = circleR * 2.5; ctx.fillStyle = #0094ff  ctx.textAlign = center  ctx.fillText(this.userName, canvas.width / 2, userNameY); if (this.userMessage) { userMessageY = userNameY + dpr * 35; ctx.fillStyle = #000  // 獲取字符寬度 for (var i = 0; i this.userMessage.length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]).width; // 字符串長度大于畫布區(qū)域要換行 if (allTextWidth canvas.width - 2* userMessageX) { for (var i = 0; i this.userMessage.length; i++) { lineWidth += ctx.measureText(this.userMessage[i]).width; if (lineWidth canvas.width - 2*userMessageX) { ctx.textAlign = left  ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//設置行高 lineWidth = 0; lastSubStrIndex = i; if (i == this.userMessage.length - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), userMessageX, userMessageY); } else { // 小于者居中顯示 ctx.textAlign = center  ctx.fillText(this.userMessage, canvas.width / 2, userMessageY); this.convertCanvasToImage(canvas);},
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，更多相關內(nèi)容請關注PHP ！
相關推薦：
canvas實現(xiàn)動態(tài)小球重疊的效果代碼
canvas實現(xiàn)愛心和彩虹雨的效果
在canvas上實現(xiàn)元素圖片鏡像翻轉(zhuǎn)動畫效果的方法
以上就是關于html5 canvas 微信海報的分享介紹的詳細內(nèi)容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。