【第1章】参考: 1.1 tag comment; 1.2 tag doctype; 1.3 tag a; 1.4 tag abbr; 1.5 tag acronym; 1.6 tag address; 1.7 tag applet; 1.8 tag area; 1.9 tag article; 1.10 tag aside; 1.11 tag audio; 1.12 tag b; 1.13 tag base; 1.14 tag basefont; 1.15 tag bdi; 1.16 tag bdo; 1.17 tag big; 1.18 tag blockquote; 1.19 tag body; 1.20 tag br; 1.21 tag button; 1.22 tag canvas; 1.23 tag caption; 1.24 tag center; 1.25 tag cite; 1.26 tag code; 1.27 tag col; 1.28 tag colgroup; 1.29 tag command; 1.30 tag datalist; 1.31 tag dd; 1.32 tag del; 1.33 tag details; 1.34 tag dfn; 1.35 tag dialog; 1.36 tag dir; 1.37 tag div; 1.38 tag dl; 1.39 tag dt; 1.40 tag em; 1.41 tag embed; 1.42 tag fieldset; 1.43 tag figcaption; 1.44 tag figure; 1.45 tag font; 1.46 tag footer; 1.47 tag form; 1.48 tag frame; 1.49 tag frameset; 1.50 tag hn; 1.51 tag head; 1.52 tag header; 1.53 tag hr; 1.54 tag html; 1.55 tag i; 1.56 tag iframe; 1.57 tag img; 1.58 tag input; 1.59 tag ins; 1.60 tag kbd; 1.61 tag keygen; 1.62 tag label; 1.63 tag legend; 1.64 tag li; 1.65 tag link; 1.66 tag map; 1.67 tag mark; 1.68 tag menu; 1.69 tag meta; 1.70 tag meter; 1.71 tag nav; 1.72 tag noframes; 1.73 tag noscript; 1.74 tag object; 1.75 tag ol; 1.76 tag optgroup; 1.77 tag option; 1.78 tag output; 1.79 tag p; 1.80 tag param; 1.81 tag pre; 1.82 tag progress; 1.83 tag q; 1.84 tag rp; 1.85 tag rt; 1.86 tag ruby; 1.87 tag s; 1.88 tag samp; 1.89 tag script; 1.90 tag section; 1.91 tag select; 1.92 tag small; 1.93 tag source; 1.94 tag span; 1.95 tag strike; 1.96 tag strong; 1.97 tag style; 1.98 tag sub; 1.99 tag summary; 1.100 tag sup; 1.101 tag table; 1.102 tag tbody; 1.103 tag td; 1.104 tag textarea; 1.105 tag tfoot; 1.106 tag th; 1.107 tag thead; 1.108 tag time; 1.109 tag title; 1.110 tag tr; 1.111 tag track; 1.112 tag tt; 1.113 tag u; 1.114 tag ul; 1.115 tag var; 1.116 tag video; 1.117 tag wbr; 1.118 attribute accesskey; 1.119 attribute class; 1.120 attribute contenteditable; 1.121 attribute contextmenu; 1.122 attribute data; 1.123 attribute dir; 1.124 attribute draggable; 1.125 attribute dropzone; 1.126 attribute hidden; 1.127 attribute id; 1.128 attribute lang; 1.129 attribute spellcheck; 1.130 attribute style; 1.131 attribute tabindex; 1.132 attribute title; 1.133 attribute translate; 1.134 event onafterprint; 1.135 event onbeforeprint; 1.136 event onload; 1.137 event onresize; 1.138 event onunload; 1.139 event onblur; 1.140 event onchange; 1.141 event onfocus; 1.142 event onselect; 1.143 event onsubmit; 1.144 event onkeydown; 1.145 event onkeypress; 1.146 event onkeyup; 1.147 event onclick; 1.148 event ondblclick; 1.149 event onmousedown; 1.150 event onmousemove; 1.151 event onmouseout; 1.152 event onmouseover; 1.153 event onmouseup; 1.154 event onshow; 1.155 event ontoggle; 1.156 canvas fill style; 1.157 canvas stroke style; 1.158 canvas shadow color; 1.159 canvas shadow blur; 1.160 canvas shadow offsetx; 1.161 canvas shadow offsety; 1.162 canvas create linear gradient; 1.163 canvas create pattern; 1.164 canvas create radial gradient; 1.165 canvas add color stop; 1.166 canvas line cap; 1.167 canvas line join; 1.168 canvas line width; 1.169 canvas miter limit; 1.170 canvas rect; 1.171 canvas fill rect; 1.172 canvas stroke rect; 1.173 canvas clear rect; 1.174 canvas fill; 1.175 canvas stroke; 1.176 canvas begin path; 1.177 canvas move to; 1.178 canvas close path; 1.179 canvas line to; 1.180 canvas clip; 1.181 canvas quadratic curve to; 1.182 canvas bezier curve to; 1.183 canvas arc; 1.184 canvas arc to; 1.185 canvas is point in path; 1.186 canvas scale; 1.187 canvas rotate; 1.188 canvas translate; 1.189 canvas transform; 1.190 canvas set transform; 1.191 canvas font; 1.192 canvas text align; 1.193 canvas text baseline; 1.194 canvas fill text; 1.195 canvas stroke text; 1.196 canvas measure text; 1.197 canvas draw image; 1.198 canvas width; 1.199 canvas height; 1.200 canvas data; 1.201 canvas create image data; 1.202 canvas get image data; 1.203 canvas put image data; 1.204 canvas global alpha; 1.205 canvas global composite operation; 1.206 av add text track 方法; 1.207 av can play type 方法; 1.208 av load 方法; 1.209 av play 方法; 1.210 av pause 方法; 1.211 av audio tracks 属性; 1.212 av auto play 属性; 1.213 av buffered 属性; 1.214 av controller 属性; 1.215 av controls 属性; 1.216 av current src 属性; 1.217 av current time 属性; 1.218 av default muted 属性; 1.219 av default play back rate 属性; 1.220 av duration 属性; 1.221 av ended 属性; 1.222 av error 属性; 1.223 av loop 属性; 1.224 av media group 属性; 1.225 av muted 属性; 1.226 av network state 属性; 1.227 av paused 属性; 1.228 av play back rate 属性; 1.229 av played 属性; 1.230 av preload 属性; 1.231 av ready state 属性; 1.232 av seekable 属性; 1.233 av seeking 属性; 1.234 av src 属性; 1.235 av start date 属性; 1.236 av text tracks 属性; 1.237 av video tracks 属性; 1.238 av volume 属性; 1.239 av abort 事件; 1.240 av can play 事件; 1.241 av can play through 事件; 1.242 av duration change 事件; 1.243 av ended 事件; 1.244 av error 事件; 1.245 av loaded data 事件; 1.246 av loaded metadata 事件; 1.247 av load start 事件; 1.248 av pause 事件; 1.249 av play 事件; 1.250 av playing 事件; 1.251 av progress 事件; 1.252 av rate change 事件; 1.253 av seeked 事件; 1.254 av seeking 事件; 1.255 av stalled 事件; 1.256 av suspend 事件; 1.257 av time update 事件; 1.258 av volume change 事件; 1.259 av waiting 事件; 1.260 attr a charset; 1.261 attr a coords; 1.262 attr a download; 1.263 attr a href; 1.264 attr a hreflang; 1.265 attr a media; 1.266 attr a name; 1.267 attr a rel; 1.268 attr a rev; 1.269 attr a shape; 1.270 attr a target; 1.271 attr a type; 1.272 attr area alt; 1.273 attr area coords; 1.274 attr area href; 1.275 attr area hreflang; 1.276 attr area media; 1.277 attr area nohref; 1.278 attr area rel; 1.279 attr area shape; 1.280 attr area target; 1.281 attr area type; 1.282 attr audio autoplay; 1.283 attr audio controls; 1.284 attr audio loop; 1.285 attr audio muted; 1.286 attr audio preload; 1.287 attr audio src; 1.288 attr base href; 1.289 attr base target; 1.290 attr basefont color; 1.291 attr basefont face; 1.292 attr basefont size; 1.293 attr bdo dir; 1.294 attr body alink; 1.295 attr body background; 1.296 attr body bgcolor; 1.297 attr body link; 1.298 attr body text; 1.299 attr body vlink; 1.300 attr button autofocus; 1.301 attr button disabled; 1.302 attr button form; 1.303 attr button formaction; 1.304 attr button formenctype; 1.305 attr button formmethod; 1.306 attr button formnovalidate; 1.307 attr button formtarget; 1.308 attr button name; 1.309 attr button type; 1.310 attr button value; 1.311 attr canvas height; 1.312 attr canvas width; 1.313 attr caption align; 1.314 attr col align; 1.315 attr col char; 1.316 attr col charoff; 1.317 attr col span; 1.318 attr col valign; 1.319 attr col width; 1.320 attr colgroup align; 1.321 attr colgroup char; 1.322 attr colgroup charoff; 1.323 attr colgroup span; 1.324 attr colgroup valign; 1.325 attr colgroup width; 1.326 attr command checked; 1.327 attr command disabled; 1.328 attr command icon; 1.329 attr command label; 1.330 attr command radiogroup; 1.331 attr command type; 1.332 attr del cite; 1.333 attr del datetime; 1.334 attr details open; 1.335 attr dialog open; 1.336 attr dir compact; 1.337 attr div align; 1.338 attr embed height; 1.339 attr embed src; 1.340 attr embed type; 1.341 attr embed width; 1.342 attr fieldset disabled; 1.343 attr fieldset form; 1.344 attr fieldset name; 1.345 attr font color; 1.346 attr font face; 1.347 attr font size; 1.348 attr form accept; 1.349 attr form accept charset; 1.350 attr form action; 1.351 attr form autocomplete; 1.352 attr form enctype; 1.353 attr form method; 1.354 attr form name; 1.355 attr form novalidate; 1.356 attr form target; 1.357 attr frame frameborder; 1.358 attr frame longdesc; 1.359 attr frame marginheight; 1.360 attr frame marginwidth; 1.361 attr frame name; 1.362 attr frame noresize; 1.363 attr frame scrolling; 1.364 attr frame src; 1.365 attr frameset cols; 1.366 attr frameset rows; 1.367 attr hn align; 1.368 attr hr align; 1.369 attr hr noshade; 1.370 attr hr size; 1.371 attr hr width; 1.372 attr iframe align; 1.373 attr iframe frameborder; 1.374 attr iframe height; 1.375 attr iframe longdesc; 1.376 attr iframe marginheight; 1.377 attr iframe marginwidth; 1.378 attr iframe name; 1.379 attr iframe sandbox; 1.380 attr iframe scrolling; 1.381 attr iframe seamless; 1.382 attr iframe src; 1.383 attr iframe srcdoc; 1.384 attr iframe width; 1.385 attr img align; 1.386 attr img alt; 1.387 attr img border; 1.388 attr img height; 1.389 attr img hspace; 1.390 attr img ismap; 1.391 attr img longdesc; 1.392 attr img src; 1.393 attr img usemap; 1.394 attr img vspace; 1.395 attr img width; 1.396 attr input accept; 1.397 attr input align; 1.398 attr input alt; 1.399 attr input autocomplete; 1.400 attr input autofocus; 1.401 attr input checked; 1.402 attr input disabled; 1.403 attr input form; 1.404 attr input formaction; 1.405 attr input formenctype; 1.406 attr input formmethod; 1.407 attr input formnovalidate; 1.408 attr input formtarget; 1.409 attr input height; 1.410 attr input list; 1.411 attr input max; 1.412 attr input maxlength; 1.413 attr input min; 1.414 attr input multiple; 1.415 attr input name; 1.416 attr input pattern; 1.417 attr input placeholder; 1.418 attr input readonly; 1.419 attr input required; 1.420 attr input size; 1.421 attr input src; 1.422 attr input step; 1.423 attr input type; 1.424 attr input value; 1.425 attr input width; 1.426 attr ins cite; 1.427 attr ins datetime; 1.428 attr keygen autofocus; 1.429 attr keygen disabled; 1.430 attr keygen form; 1.431 attr keygen keytype; 1.432 attr keygen name; 1.433 attr label for; 1.434 attr label form; 1.435 atrr legend align; 1.436 attr li type; 1.437 attr li value; 1.438 attr link charset; 1.439 attr link href; 1.440 attr link hreflang; 1.441 attr link media; 1.442 attr link rel; 1.443 attr link rev; 1.444 attr link sizes; 1.445 attr link target; 1.446 attr link type; 1.447 attr map name; 1.448 attr menu label; 1.449 attr menu type; 1.450 attr meta charset; 1.451 attr meta content; 1.452 attr meta http equiv; 1.453 attr meta name; 1.454 attr meta schema; 1.455 attr meter form; 1.456 attr meter high; 1.457 attr meter low; 1.458 attr meter max; 1.459 attr meter min; 1.460 attr meter optimum; 1.461 attr meter value; 1.462 attr object align; 1.463 attr object border; 1.464 attr object data; 1.465 attr object form; 1.466 attr object height; 1.467 attr object hspace; 1.468 attr object name; 1.469 attr object type; 1.470 attr object usemap; 1.471 attr object vspace; 1.472 attr object width; 1.473 attr ol compact; 1.474 attr ol reversed; 1.475 attr ol start; 1.476 attr ol type; 1.477 attr optgroup disabled; 1.478 attr optgroup label; 1.479 attr option disabled; 1.480 attr option label; 1.481 attr option selected; 1.482 attr option value; 1.483 attr output for; 1.484 attr output form; 1.485 attr output name; 1.486 attr p align; 1.487 attr param name; 1.488 attr param value; 1.489 attr pre width; 1.490 attr html mainfest; 1.491 attr html xmlns; 1.492 attr progress max; 1.493 attr progress value; 1.494 attr q cite; 1.495 attr script async; 1.496 attr script charset; 1.497 attr script defer; 1.498 attr script src; 1.499 attr script type; 1.500 attr select autofocus; 1.501 attr select disabled; 1.502 attr select form; 1.503 attr select multiple; 1.504 attr select name; 1.505 attr select required; 1.506 attr select size; 1.507 attr source media; 1.508 attr source src; 1.509 attr source type; 1.510 attr style media; 1.511 attr style scoped; 1.512 attr style type; 1.513 attr table align; 1.514 attr table bgcolor; 1.515 attr table border; 1.516 attr table cellpadding; 1.517 attr table cellspacing; 1.518 attr table frame; 1.519 attr table rules; 1.520 attr table summary; 1.521 attr table width; 1.522 attr tbody align; 1.523 attr tbody char; 1.524 attr tbody charoff; 1.525 attr tbody valign; 1.526 attr td abbr; 1.527 attr td align; 1.528 attr td axis; 1.529 attr td bgcolor; 1.530 attr td char; 1.531 attr td charoff; 1.532 attr td colspan; 1.533 attr td headers; 1.534 attr td height; 1.535 attr td nowrap; 1.536 attr td rowspan; 1.537 attr td scope; 1.538 attr td valign; 1.539 attr td width; 1.540 attr textarea autofocus; 1.541 attr textarea cols; 1.542 attr textarea disabled; 1.543 attr textarea form; 1.544 attr textarea maxlength; 1.545 attr textarea name; 1.546 attr textarea placeholder; 1.547 attr textarea readonly; 1.548 attr textarea required; 1.549 attr textarea rows; 1.550 attr textarea wrap; 1.551 attr tfoot align; 1.552 attr tfoot char; 1.553 attr tfoot charoff; 1.554 attr tfoot valign; 1.555 attr th abbr; 1.556 attr th align; 1.557 attr th axis; 1.558 attr th bgcolor; 1.559 attr th char; 1.560 attr th charoff; 1.561 attr th colspan; 1.562 attr th headers; 1.563 attr th height; 1.564 attr th nowrap; 1.565 attr th rowspan; 1.566 attr th scope; 1.567 attr th valign; 1.568 attr th width; 1.569 attr thead align; 1.570 attr thead char; 1.571 attr thead charoff; 1.572 attr thead valign; 1.573 attr time datetime; 1.574 attr tr align; 1.575 attr tr bgcolor; 1.576 attr tr char; 1.577 attr tr charoff; 1.578 attr tr valign; 1.579 attr track default; 1.580 attr track kind; 1.581 attr track label; 1.582 attr track src; 1.583 attr track srclang; 1.584 attr ul compact; 1.585 attr ul type; 1.586 attr video autoplay; 1.587 attr video controls; 1.588 attr video height; 1.589 attr video loop; 1.590 attr video muted; 1.591 attr video poster; 1.592 attr video preload; 1.593 attr video src; 1.594 attr video width; 1.595 tag hgroup; 1.596 tag picture; 1.597 attr blockquote cite

第1章第191节 canvas font

教程阅读运行代码

HTML canvas font 属性

实例

在画布上写一段 30 像素的文本，使用的字体是 "Arial"：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 font 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSS font 属性相同。

默认值：	10px sans-serif
JavaScript 语法：	context.font="italic small-caps bold 12px arial";

属性值

值	描述
font-style	规定字体样式。可能的值： normal italic oblique
font-variant	规定字体变体。可能的值： normal small-caps
font-weight	规定字体的粗细。可能的值： normal bold bolder lighter 100 200 300 400 500 600 700 800 900
font-size/line-height	规定字号和行高，以像素计。
font-family	规定字体系列。
caption	使用标题控件的字体（比如按钮、下拉列表等）。
icon	使用用于标记图标的字体。
menu	使用用于菜单中的字体（下拉列表和菜单列表）。
message-box	使用用于对话框中的字体。
small-caption	使用用于标记小型控件的字体。
status-bar	使用用于窗口状态栏中的字体。

上一节下一节>