怎樣用js結合h5畫出多頭像組合頭像

2021-07-27 17:20:17 字數 955 閱讀 8545

首先,獲取你需要的頭像位址,儲存在乙個物件裡面,例如:

var data = ;  然後可以限定組合的最大個數,比如限定四個,那麼久判斷資料庫裡的個數是否大於4,如果大於4,那麼就取前四個,如果不大於4,那麼就取完。

隨後,看注釋:

var base64 = ; //用來裝合成的

var c = document_createelement_x_x('canvas'); //建立乙個canvas

var ctx = c.getcontext('2d'); //返回乙個用於在畫布上繪圖的2維環境

var len = data.length; //獲取需要組合的頭像的張數

var a = 0; //初始化需要組合頭像的長度

var b = 0; //初始化需要組合頭像的寬度

c.width = 290; //定義canvas畫布的寬度

c.height = 290; //定義canvas畫布的高度

ctx.rect(0, 0, c.width, c.height); //畫矩形

ctx.fillstyle = '#fff'; //設定矩形顏色

ctx.fill(); //關閉並填充該路徑

接下來就需要寫乙個function開始畫:

function drawing(n)​

}else

}​​

最後,執行這個function:

drawing(0);​

完成操作,在html頁面中的img的src裡面引用base64的值,就可以顯示出來了,但是要注意,這段js要在html頁面執行之前執行,不然顯示不出來的哦

這是效果:

中間那個就是2張圖合成的效果

結合H5和JS修改背景顏色

使用h5表單新增加的type元素進行選擇顏色,接著定義乙個方法,在onchange事件會在域的內容改變時發生的時候觸發,操作誰就獲取誰來操作。doctype html en utf 8 viewport content width device width,initial scale 1.0 doc...

怎樣用js更換標籤

怎樣用js將testtesttesttest 修改為testtesttesttest 就是將p替換為div,改變標籤名稱,不修改其中的內容,如何實現 不可以直接修改,只能是新增乙個刪除乙個,這裡就不用jquery了 給p加個id好做,假如p的id為detail varp document.getel...

怎樣用JS實現非同步轉同步

安裝 npm install sync 其中引用了fiber庫,用c編譯的node庫,可以實現yield 功能 詳細使用方法參見官網 url 如何使用 首先引入模組,var sync require sync 任何同步呼叫都必須位於乙個sync.block塊內,sync.block描述可以巢狀。sy...