ctx.textalign文字水平對齊方式，相對繪製座標來說的
ctx.direction屬性css(rtl ltr) start和end於此相關
ctx.textbaseline 設定基線（垂直對齊方式 ）
measuretext() 獲取文字寬度obj.width
//繪製一段文字
var ctx = document.
queryselector
("canvas").
getcontext
("2d");
var w = ctx.canvas.width;
var h = ctx.canvas.height;
//文字
var txt =
"好冷好冷"
;//繪製水平垂直線
ctx.
beginpath()
; ctx.
moveto(0
, h /2-
0.5)
; ctx.
lineto
(w, h /2-
0.5)
; ctx.
moveto
(w /2,
0); ctx.
lineto
(w /
2, h )
; ctx.strokestyle =
"#eee"
; ctx.
stroke()
;//繪製文字
ctx.
beginpath()
; ctx.font =
"40px microsoft yahei"
;//水平對齊方式
ctx.textalign =
"center"
;//垂直對齊方式
ctx.textbaseline =
"middle"
; ctx.
filltext
(txt, w /
2, h /2)
;//畫下劃線和文字一樣長
ctx.
beginpath()
;var width = ctx.
measuretext
(txt)
.width;
ctx.
moveto
(w /
2- width /
2, h /2+
20); ctx.
lineto
(w /
2+ width /
2, h /2+
20); ctx.strokestyle =
"#000"
; ctx.
stroke()
;
了解canvas畫布
一 什麼是 canvas？二 canvas基本使用 mycanvas width 300 height 300 canvas canvas畫布的預設尺寸是300 150 1 獲取到canvas元素 var c document.getelementbyid mycanvas 2 執行上下文 繪製畫筆...
學習canvas畫布
我們可以用畫布 canvas 繪製各種圖形，下面 是繪製的乙個圓形 doctype html html head title canvas畫布 title meta charset utf 8 meta name viewport content width device width,initial...
Canvas的fill 填充規則
在canvas中使用fill 進行填充，遵循非零環繞填充規則。非零環繞填充規則 如果想知道某一區域是否被填充，就從這一區域畫一條直線向外，在與其他線的交點處，如果其他線是順時針方向畫的，就 1，逆時針則 1，如果最後總和為0，則不會填充，非零則填充。例如 假設有兩個長方形，外面大的長方形是順時針反方...