本篇文章主要介紹如何用html創建canvas畫布生成圖片，感興趣的朋友參考下，希望對大家有所幫助。

/**要生成圖片的html*/ p >
//設置canva畫布大小，這里會把畫布大小設置為2倍，為了解決生成圖片不清晰的問題，需要注意接下來所有的函數都是在html2canvas這個對象里定義的var html2canvas={ canvas:document.getElementById( canvas ), ctx:canvas.getContext( 2d ), saveImage:function(){ this.canvas.width=windowPro.innerWidth*2; this.canvas.height=windowPro.innerHeight*2-4.8*bastFontSize; this.ctx.fill >2，將要生成的圖片的dom元素載入canvas中，
一般我們想生成圖片的時候，dom元素基本上由圖片和文字組成，想一些效果之類的是不適合生成圖片的。 
a， 獲取要加載到canvas的圖片
 domArray:[$( .con_1_1 ),$( .con_1_2 )],//要加載的圖片元素列表 imgArrayLoad:function(){ var that=this,domArray=this.domArray; for(var i=0,len=domArray.length;i i++){ (function(){ //循環出所有圖片元素，一個個圖片添加 that.addImgToCanvas(domArray[i],that.imgAllLoad); }()) },
b，獲取每個圖片元素的在頁面上大小，距離頂部地步距離，然后繪制到canvas相應的位置 
這里圖片大小和距離也是取得2倍，原因是解決生成的圖片不清晰。
 addImgToCanvas:function(obj,fn){ var width=obj.width()*2,//圖片在網頁寬度 height=obj.height()*2,//圖片在網頁高度 x=obj[0].x*2,//圖片距離網頁最頂部距離 y=obj[0].y*2,//圖片距離網頁最右邊距離 img=new Image(), that=this, src=obj.attr( src  img.src=src; img.onload=function(){ //把圖片繪制到canvas上 that.ctx.drawImage(obj[0],x,y,width,height);上 that.loadImgNum++; if(fn typeof fn === function )fn(that.loadImgNum); /**位置1**/ },
3，將要生成的文字的dom元素載入canvas中，
同把圖片插入到canvas類似，首先需要獲取文字元素，確定文字在網頁中上下左右的位置，之后插入到相應的canvas里。
a， 獲取要加載文字元素，
 textObj:[$( .title_des2 ),$( .title_des3 )], textArratLoad:function(){ var that=this; for(var m=0,len=that.textObj.length;m m++){ (function(){ that.writeTextOnCanvas(domArray[m],parseInt(28)+ px 微軟雅黑 , #d0b150 ) })() },
b，獲取每個文字元素距離網頁距離，同樣的，距離距離長度必須喂2倍，把文字添加到canvas上
 writeTextOnCanvas:function(obj,fontsize,color){//添加文字到canvas var width=obj.width()*2, height=obj.height()*2, x=obj.offset().left*2, y=obj.offset().top*2; var that=this; var text=obj.html().replace(/^/s+|/s+$/, //去掉文字里的空格 that.ctx.fillStyle =color; //設置文字顏色 that.ctx.font = fontsize;//設置文字大小 that.ctx.textAlign= left //設置文字對其方向 textBaseline = middle  //因為canvas里的文字不會換行，所以我們需要想辦法讓長段文字換行 for(var i = 1; that.getTrueLength(text) i++){ var tl = that.cutString(text, 30); that.ctx.fillText(text.substr(0, tl), x, y+36*i);// 把文字添加到canvas上 text = text.substr(tl); },
c，文字繪制到canvas時，自動換行。。因為canvas繪制文字的時候只能設置最大寬度和距離頂部左邊距離。所以我們需要自行處理下。
解決思路：規定我們每行要顯示的字數多少，然后根據字符串的長度截取對應的長度。由于涉及到中午因為占用的字符數不一致所以建議都轉為字節長度，方法如下。
 getTrueLength:function(str){//獲取字符串的真實長度（字節長度） var len = str.length, truelen = 0; for(var x = 0; x len; x++){ if(str.charCodeAt(x) 128){ truelen += 2; }else{ truelen += 1; } return truelen; cutString:function(str, leng){//按字節長度截取字符串，返回substr截取位置 var len = str.length, tlen = len, nlen = 0; for(var x = 0; x len; x++){ if(str.charCodeAt(x) 128){ if(nlen + 2 leng){ nlen += 2; }else{ tlen = x; break; }else{ if(nlen + 1 leng){ nlen += 1; }else{ tlen = x; break; } return tlen; }
4，最后把canvas轉為圖片，需要注意的是必須等所有圖片都載入完成才能進行圖片的生成，要不然會造成生成的圖片不全。文字載入可以不考慮。
 imgAllLoad:function(nexi){ var length=this.domArray.length; if(nexi =length){ var dataURL = canvas.toDataURL(); $( .shareImg img ).attr( src ,dataURL);//canvas轉為圖片 }
總結：
1，獲取圖片和文字位置，通過canvas的ctx.drawImage(IMG,left,top,width,height)繪制圖片，通過.ctx.fillText(text, left,top)繪制文字，通過canvas.toDataURL();生成圖片。 
2，需要注意為了生成圖片不失真，canvas大小是2倍，圖片文字都是2倍。 
3，為了文字換行， getTrueLength 
4，必須等到圖片都繪制完成，再生成圖片，這個很重要。
相關推薦：
HTML圖片的img標簽怎樣使用
HTML圖片與超鏈接學習筆記
html圖片img加超鏈接后產生難看的藍色邊框的解決方法
以上就是用html創建canvas畫布生成圖片的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。