iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

菜雞用Canvas/Pixi動動動動動起來系列 第 6

【Day06】Canvas-繪製文字

繪製文字

文字

方法 描述
fillText(textToDraw, x, y [, maxWidth]) 填滿文字。textToDraw是文字內容,x,y指在(x,y)繪製填滿指定文字,maxWidth是可繪製最大寬度
strokeText(textToDraw, x, y [, maxWidth]) 邊框文字。textToDraw是文字內容,x,y指在(x,y)繪製填滿指定文字邊框,maxWidth是可繪製最大寬度
measureText(textToDraw) 測量文字寬度,返回一個物件包含了寬度,像素值。textToDraw是文字內容
屬性 描述
font 設置當前文字字體屬性,包含字型及字體大小,預設是ctx.font="10px sans-serif"
textAlign 設置當前文字對齊方式,有leftrightcenterstartend等等屬性值,預設值為start
textBaseline 設置當前文字基線,有tophangingmiddlealphabeticideographicbottom等等屬性值,預設值為alphabetic
ctx.font = "30px sans-serif"
ctx.fillText("今天是鐵人賽第六天", 10, 100)
ctx.strokeText("好像快沒梗", 10, 150)
ctx.fillText("但必須撐下去", 10, 200)

小小範例

codepen範例連結

ctx.font = "30px sans-serif" //設定文字字型 大小
ctx.fillStyle="#00A0E9" //設定文字填滿顏色
ctx.strokeStyle="#D50A17" //設定文字邊框
ctx.fillText("今天是鐵人賽第六天", 10, 100)  //填滿文字
ctx.strokeText("好像快沒梗", 10, 150) //邊框文字
ctx.fillText("但必須撐下去", 10, 200) //填滿文字
ctx.strokeText("好棒棒", 10, 250) //邊框文字
this.textWidth=ctx.measureText("鐵人賽第六天").width //測量文字寬度

最後成果:
https://ithelp.ithome.com.tw/upload/images/20200916/20111500uzmfhhrMVo.png

~如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1]https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API/Tutorial/Drawing_text
[2]https://www.w3school.com.cn/tags/html_ref_canvas.asp
[3]https://www.runoob.com/w3cnote/html5-canvas-intro.html
[4]http://web.h3399.cn/CanvasRenderingContext2D.htm


上一篇
【Day05】Canvas-套用顏色與樣式
下一篇
【Day07】Canvas-繪製影像
系列文
菜雞用Canvas/Pixi動動動動動起來30

1 則留言

0
angelliya00
iT邦新手 4 級 ‧ 2020-09-19 12:16:44

加油!
7~15 天會很絕望

然後就看開了 (誒)

哈哈謝謝~

我要留言

立即登入留言