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