需求：封裝consul服務(wù)的webUI；

原因：展示consul的服務(wù)信息時(shí)，需要嵌套動(dòng)畫，由于其沒有內(nèi)置的icon，所以將服務(wù)name放于圖片位；

分析：展示信息時(shí)采用了卡片式的服務(wù)布局，縮放式的服務(wù)卡片，只有將服務(wù)名稱作為圖片才能實(shí)現(xiàn)動(dòng)畫效果；

最基礎(chǔ)動(dòng)畫：->

實(shí)現(xiàn)：將服務(wù)名稱置于canvas畫布中，再將畫布轉(zhuǎn)為圖片

代碼實(shí)現(xiàn)：

1、獲取dom

/*** 獲取service卡片中img對(duì)象并賦值src* @param serviceName 服務(wù)名稱*/setImageSrc(serviceName) {//因?yàn)閟rc不是該HTMLElement類型的屬性，而是HTMLImageElement。let image = <HTMLImageElement>document.querySelector("#nameImage" + serviceName);image.src = this.canvasWrapText({canvas:<HTMLElement>document.querySelector("#canvas" + serviceName),text: serviceName});}

2、畫布=>圖片

/*** 繪制文字到canvas，判斷換行位置，和設(shè)置canvas高度* @param options canvas畫布對(duì)象*/canvasWrapText(options) {let settings = {canvas:document.getElementsByTagName("canvas")[0], //canvas對(duì)象，必填，不填寫默認(rèn)找到頁(yè)面中的第一個(gè)canvascanvasWidth:240, //canvas的寬度drawStartX:50, //繪制字符串起始x坐標(biāo)drawStartY:30, //繪制字符串起始y坐標(biāo)lineHeight:30, //文字的行高font:"24px 'Microsoft Yahei'", //文字樣式text:"請(qǐng)修改掉默認(rèn)的配置", //需要繪制的文本drawWidth:220, //文字顯示的寬度color:"#000000", //文字的顏色textAlain: "center",backgroundColor:"#ffffff", //背景顏色 };//將傳入的配置覆蓋掉默認(rèn)配置if(!!options && typeof options === "object"){for(let i in options){settings[i] = options[i];}}//獲取2d的上線文開始設(shè)置相關(guān)屬性let canvas = settings.canvas;canvas.width = settings.canvasWidth;let ctx = canvas.getContext("2d");//繪制背景色ctx.fillStyle = settings.backgroundColor;ctx.fillRect(0,0,canvas.width,canvas.height);//繪制文字ctx.font = settings.font;ctx.fillStyle = settings.color;// @ts-ignorectx.textAlign = settings.textAlain;let lineWidth = 0; //當(dāng)前行的繪制的寬度let lastTextIndex = 0; //已經(jīng)繪制上canvas最后的一個(gè)字符的下標(biāo)//由于改變canvas 的高度會(huì)導(dǎo)致繪制的紋理被清空，所以，不預(yù)先繪制，先放入到一個(gè)數(shù)組當(dāng)中let arr = [];for(let i = 0; i< settings.text.length; i++){//獲取當(dāng)前的截取的字符串的寬度lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;if(lineWidth > settings.drawWidth){//判斷最后一位是否是標(biāo)點(diǎn)符號(hào)if(judgePunctuationMarks(settings.text[i-1])){arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));lastTextIndex = i;}else{arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));lastTextIndex = i-1;}}//將最后多余的一部分添加到數(shù)組if(i === settings.text.length - 1){arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));}}//根據(jù)arr的長(zhǎng)度設(shè)置canvas的高度canvas.height = arr.length*settings.lineHeight+settings.drawStartY;ctx.font = settings.font;ctx.fillStyle = settings.color;for(let i =0; i<arr.length; i++){ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);}//判斷是否是需要避開的標(biāo)簽符號(hào) function judgePunctuationMarks(value) {let arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];for(let i = 0; i< arr.length; i++){if(value === arr[i]){return true;}}return false;}return canvas.toDataURL();}

注：關(guān)于代碼實(shí)現(xiàn)中的關(guān)鍵節(jié)點(diǎn)都有詳細(xì)的注解，此處不再累贅。

3、html：

<div class="member-image"><!--為了將文字渲染為圖片所設(shè)置的樣例canvas--><canvas id="canvas{{card.name}}" width="" height="" style="background-color:#ffffff;display: none;"></canvas><img id="nameImage{{card.name}}" alt="Member"> </div>

注：html代碼中有遍歷，不可直接使用

?

轉(zhuǎn)載于:https://www.cnblogs.com/PearlRan/p/11248556.html

總結(jié)

以上是生活随笔為你收集整理的js将文字填充与canvas画布再转为图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。