水平对齐textAlign
- context.textAlign="center|end|left|right|start";
其中各值及意义如下表。
| 值 |
描述 |
| start |
默认。文本在指定的位置开始。 |
| end |
文本在指定的位置结束。 |
| center |
文本的中心被放置在指定的位置。 |
| left |
文本左对齐， |
| right |
文本右对齐。 |
我们通过一个例子来直观的感受一下。
- <!DOCTYPE html>
<html lang="zh">
- <head>
<meta charset="UTF-8">
- <title>textAlign</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";
