使用者名稱第乙個字元設定為預設頭像

2021-10-06 18:24:54 字數 2196 閱讀 9395

//html

"background: pink;"

>

//js

let haha =

"haha"

;let canvas = document.queryselector(

"canvas");

let octx = canvas.getcontext(

"2d");

canvas.width = 40;

canvas.height = 40;

let str = haha.substring(0, 1).touppercase();

octx.font =

"30px 微軟雅黑"

;octx.textbaseline =

"middle"

octx.textalign =

"center"

;octx.filltext(str, canvas.width / 2, canvas.height/ 2)

;let dataurl = canvas.todataurl();

console.log(dataurl)

;

這樣會得到連線

但是到這裡會發現兩個問題

1.文字不是垂直居中的

2.通過連線得到的沒有背景

垂直居中:

將填充文字的位置修改一下

let textmetrics = octx.measuretext(str)

;let actualboundingboxdescent = textmetrics.actualboundingboxdescent;

octx.filltext(str, canvas.width / 2, (canvas.height + actualboundingboxdescent) / 2)

;// octx.filltext(str, canvas.width / 2, canvas.height/ 2)

;

在填充文字前面新增加上以下的**:

octx.fillstyle =

"pink"

;octx.fillrect(0, 0, canvas.width, canvas.height)

;octx.fillstyle =

"#fff"

; //這行是文字的顏色,不加這樣的話,文字會看不出來

let haha =

"haha"

;let canvas = document.queryselector(

"canvas");

let octx = canvas.getcontext(

"2d");

canvas.width = 40;

canvas.height = 40;

octx.fillstyle =

"pink"

; octx.fillrect(0, 0, canvas.width, canvas.height)

; octx.fillstyle =

"#fff"

;let str = haha.substring(0, 1).touppercase();

octx.font =

"30px 微軟雅黑"

; // 設定對其方式

octx.textbaseline =

"middle"

octx.textalign =

"center"

;let textmetrics = octx.measuretext(str)

;let actualboundingboxdescent = textmetrics.actualboundingboxdescent;

octx.filltext(str, canvas.width / 2, (canvas.height + actualboundingboxdescent) / 2)

;let dataurl = canvas.todataurl(

'image/jpeg', 0.6)

; console.log(dataurl)

;

用JS去掉第乙個字元和最後乙個字元

用js去掉第乙個字元和最後乙個字元 最近老遇上這種事,如有乙個字串 lightinthebox 但是我只是需要lightinthebox,就是不要 怎麼用又快又有效的辦法去掉呢。stringobject.substring start,stop 擷取的是開始與結束的字串。stringobject.s...

js 字串中取得第乙個字元和最後乙個字元

var str hello world 刪除第乙個字元 h,結果為 ello world alert str.slice 1 刪除最後乙個字元 d,結果為 hello worl alert str.substring 0,str.length 1 追問我就是要判斷第乙個好最後乙個字元是否為逗號,是逗...

找出乙個字串中第乙個無重複字元

編寫乙個高效率函式來找出乙個字串中第乙個無重複字元.例如 total 中的o,teeter 中的r.要求演算法效率優於o n2 函式呼叫模型如下 public static character firstnorepeated string str public class firstnorepeat...