摘要：初略算了算大概有20天沒有寫博客了，原本是打算1月1號元旦那天寫一個年終總結的，博客園里大佬們都在總結過去，迎接將來，看得我熱血沸騰，想想自己也工作快2年了，去年都沒有去總結一下，今年勢必要總結一番了，但是工作任務有點緊，就把這件事擱置起來了，只好推到來年收假去寫一篇總結性的博客了，說起寫博客，還是我的一個室友推薦我來寫的，當時就覺得上班任務都做不完，哪有時間來寫博客，后來發現自己有問題就去找別人的博客來解決，就想着自己也寫博客，把自己不知道或者有經驗的記錄下來，一方面以后遇到同樣的問題可以來參考，另一方面說不定也多多少少能幫助到一些人，現在也斷斷續續寫了大概20篇博客了，每當別人留言說學到了，我就堅定了我寫博客的想法了，咳咳，話題扯開了，扯回來......
en,然后我要說什么來着？對，如何用畫布生成一張海報，就像這樣：
咳咳，拿錯了，拿出我寫的生成報告的圖片的，博客這里介紹入門級的，再來一次，就像這樣
：
嗯，本文就按照上方這張海報來進行講解（圖文與博主實際想法不符）。
一.什么是Canvas?
HTML5 <canvas> 元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成.
<canvas> 標簽只是圖形容器，您必須使用腳本來繪制圖形。
你可以通過多種方法使用 canvas 繪制路徑,盒、圓、字符以及添加圖像。
二.創建一個畫布（Canvas）
<canvas id="aa" width="370px"height="667px" style="display: none;"></canvas>
三.Canvas-文本
var aa = document.getElementById('aa'); var bb = aa.getContext('2d'); bb.fillStyle = '#fff'; // 文字填充顏色 bb.font = '30px Adobe Ming Std'; bb.fillText('豬年快樂！',120,200);
四.Canvas-圖片
var imgtwo = new Image; imgtwo.src = 'img/rjgx-canvasthree.png'; imgtwo.onload = function () { bb.drawImage(imgtwo, 0,0,370,667); }
五.Canvas-文本換行
fillText()在固寬的canvas中，字數過多的時候，並不會自動換行，我們可以增加canvas本身的寬度，但這不是解決問題的根本方法。還記得之前介紹canvas基本api的時候，有一個函數，
context.measureText(text)
這個函數可以測量字體的寬高度，那就好辦了，我們計算好我們字符串的長度加上一個大概的寬度，基本上可以處理這種換行的問題了。
bb.fillStyle = 'yellow'; bb.font = '26px Adobe Ming Std'; bb.lineWidth=1; var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈" // bb.fillText(str,65,750); var lineWidth = 0; var canvasWidth = aa.width-50;//計算canvas的寬度 var initHeight=400;//繪制字體距離canvas頂部初始的高度 var lastSubStrIndex= 0; //每次開始截取的字符串的索引 for(let i=0;i<str.length;i++){ lineWidth+=bb.measureText(str[i]).width; if(lineWidth>canvasWidth){ bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//繪制截取部分 initHeight+=40;//40為字體的高度 lineWidth=25; lastSubStrIndex=i; } if(i==str.length-1){//繪制剩余部分 bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight); } }
六.Canvas-加入容器
window.onload=function(){ var img = convertCanvasToImage(aa); $('.box').append(img); console.log(img); } function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }
七.Canvas-下載
//下載海報 function downloadimg() { var img = $('.box').children('img').attr("src"); var alink = document.createElement("a"); alink.href = img; alink.download = "新年快樂.png"; alink.click(); }
八.整體代碼
好了好了，知道了，我其實也不喜歡看介紹，直接給我個demo多好，直接復制看效果，但是不介紹直接發代碼會被移除首頁的，所以
，你們就勉為其難看一下吧，希望有用：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <title>文字+圖片+下載圖片</title> <style> *{ margin: 0; padding: 0; } </style> </head> <body> <canvas id="aa" width="370px"height="667px" style="display: none;"></canvas> <div class="box" style="background-color:red;width: 370px;height: 667px;"></div> <input type="button" value="下載畫報" style="margin-left: 150px;margin-top: 20px;" onclick="downloadimg()"/> <script> var aa = document.getElementById('aa'); var bb = aa.getContext('2d'); var imgone = new Image; imgone.src = 'img/happy.png'; imgone.onload = function () { bb.drawImage(imgone, 0,0,370,667); bb.fillStyle = '#fff'; // 文字填充顏色 bb.font = '30px Adobe Ming Std'; bb.fillText('豬年快樂！',120,200); bb.fillStyle = '#fff'; bb.font = '40px Adobe Ming Std'; bb.fillText('2019年',120,270); bb.fillStyle = '#fff'; bb.font = '26px Adobe Ming Std'; bb.fillText('Bug也會一直陪在你身邊',40,320); bb.fillStyle = 'yellow'; bb.font = '26px Adobe Ming Std'; bb.lineWidth=1; var str = "哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈" // bb.fillText(str,65,750); var lineWidth = 0; var canvasWidth = aa.width-50;//計算canvas的寬度 var initHeight=400;//繪制字體距離canvas頂部初始的高度 var lastSubStrIndex= 0; //每次開始截取的字符串的索引 for(let i=0;i<str.length;i++){ lineWidth+=bb.measureText(str[i]).width; if(lineWidth>canvasWidth){ bb.fillText(str.substring(lastSubStrIndex,i),25,initHeight);//繪制截取部分 initHeight+=40;//40為字體的高度 lineWidth=25; lastSubStrIndex=i; } if(i==str.length-1){//繪制剩余部分 bb.fillText(str.substring(lastSubStrIndex,i+1),25,initHeight); } } } window.onload=function(){ var img = convertCanvasToImage(aa); $('.box').append(img); console.log(img); } function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } //下載海報 function downloadimg() { var img = $('.box').children('img').attr("src"); var alink = document.createElement("a"); alink.href = img; alink.download = "新年快樂.png"; alink.click(); } </script> </body> </html>
總結，希望這篇文章對大家有用，如果覺得博主寫的還可以，歡迎點關注哦，明年會更新我的2018年終總結哦，在這里祝大家2019年新年快樂，早日脫單，永不脫發，有什么問題歡迎留言，