19 canvas繪製文字

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>19-canvas繪製文字
title
>
6<
style
>7*
11canvas
16style
>
17head
>
18<
body
>
19<
canvas 
width
="800"
height
="400"
>
canvas
>
20<
script
>
21//
1.拿到canvas
22let ocanvas 
=document.queryselector(
"canvas");
23//
2.從canvas中拿到繪圖工具
24let octx 
=ocanvas.getcontext("2d
");25//
3.繪製參考線
26let canvaswidth 
=octx.canvas.width;
27let canvasheight 
=octx.canvas.height;
28octx.moveto(
0, canvasheight
/2);
29octx.lineto(canvaswidth, canvasheight
/2);
30octx.stroke();
31octx.moveto(canvaswidth
/2, 0);
32octx.lineto(canvaswidth
/2, canvasheight);
33octx.stroke();
34//
4.繪製文字
35let str ="
小白兔真可愛兩隻耳朵豎起來";
36//
通過font屬性可以設定文字的大小和樣式
37octx.font ="
50px 微軟雅黑";
38//
通過textbaseline屬性可以設定文字垂直方向的對齊方式
39//
注意點: 在對齊的時候是以繪製文字的y作為參考點進行對齊的
40octx.textbaseline ="
middle";
41//
通過textalign屬性可以設定文字水平方向的對齊方式
42//
注意點: 在對齊的時候是以繪製文字的x作為參考點進行對齊的
43octx.textalign ="
center";
44/*
45注意點:
46在繪製文字的時候, 是以文字的左下角作為參考點進行繪製
47* 
*/48
//不填充文字
49//
octx.stroketext(str, canvaswidth/2, canvasheight/2);
50//
填充文字
51//
octx.filltext(str, canvaswidth/2, canvasheight/2);
52script
>
53body
>
54html
>

Canvas 繪製文字

filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...

canvas繪製文字

屬性和方法 font value 設定字型 textalign value 設定字型對齊方式 start,end,left,right,center textbaseline value 設定基線對齊方式 top,hanging,middle,alphabetic,ideographic,botto...

canvas繪製文字

canvas 提供了兩種方法來渲染文字 filltext text,x,y 在指定的 x,y 位置填充指定的文字 stroketext text,x,y 在指定的 x,y 位置繪製文字邊框 示例 ctx.filltext 無悟飯空 100,100 ctx.stroketext 無悟飯空 100,10...