canvas文字自動換行、圓角矩形畫法、生成圖片手機長按保存
阿新 • • 發佈:2018-08-15
UNC get 函數 odata -i 圓角 ont eight nehe
canvas的文字自動換行函數封裝
// str:要繪制的字符串 // canvas:canvas對象 // initX:繪制字符串起始x坐標 // initY:繪制字符串起始y坐標 // lineHeight:字行高,自己定義個值即可 function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){ var ctx = canvas.getContext("2d");var lineWidth = 0; var canvasWidth = canvas.width; var lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; //減去initX,防止邊界出現的問題 if(lineWidth>canvasWidth-initX*2.3){ ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i; } if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY); } } }
vanvas畫圓角矩形的函數封裝
// 封裝的一個用於繪制圓角矩形的函數. function roundedRect(x,y,width,height,radius,color,type){ var ctx=this.ctx; ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx[type+‘Style‘] = color; ctx.closePath(); ctx[type](); }
直接在html中用canvas畫好的圖,在手機端是不能實現直接長按保存到相冊的。這裏給出一種方法是:把canvas畫好的圖變成鏈接,引入img中,canvas隱藏,這樣實現了canvas畫圖手機長按保存的效果。在這裏,記錄一個過程中遇到的問題,直接用設計稿的尺寸來定義畫布大小,如果尺寸太大的話,手機上打開(只是說canvas畫好的圖未經過任何處理)會出現放不開的情況,只有手動縮放才能正常顯示。遇到這個問題,嘗試過canvas的縮放,不好使,最後也是通過上面的方法來解決的。
canvas導出位圖片
var canvas = document.getElementById(‘mycanvas‘); var urlimg=canvas.toDataURL(‘image/png‘, 0.92); document.getElementById("test").src = urlimg;
canvas文字自動換行、圓角矩形畫法、生成圖片手機長按保存