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

//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...