| 描述 |
| alphabetic |
默认。文本基线是普通的字母基线。 |
| top |
文本基线是em方框的顶端。 |
| hanging |
文本基线是悬挂基线。 |
| middle |
文本基线是em方框的正中。 |
| ideographic |
文本基线是表意基线。 |
| bottom |
文本基线是em方框的底端。 |
首先咱们通过一个图来看一下各个基线代表的位置。
我们通过一个例子来直观的感受一下。
- <!DOCTYPE html>
<html lang="zh">
- <head>
<meta charset="UTF-8">
- <title>textBaseline</title>
<style>
- body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
</head>
- <body>
<div id="canvas-warp">
- <canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
- </canvas>
</div>
-
<script>
- window.onload = function(){
var canvas = document.getElementById("canvas");
- canvas.width = 800;
canvas.height = 600;
- var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
