HTML5 Canvas实现文本对齐的方法总结_html5教程技巧

水平对齐textAlign

JavaScript Code复制内容到剪贴板

1. context.textAlign="center|end|left|right|start";

其中各值及意义如下表。

值	描述
start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐，
right	文本右对齐。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

2. "zh">
4. "UTF-8">
7. body { background: url("./images/bg3.jpg") repeat; }
8. #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
12. "canvas-warp">
13. "canvas">
14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

// 在位置 400 创建蓝线

context.strokeStyle="blue";

context.moveTo(400,100);

context.lineTo(400,500);

context.stroke();

context.fillStyle = "#000";

context.font="50px Arial";

// 显示不同的 textAlign 值

context.textAlign="start";

context.fillText("textAlign=start", 400, 120);

context.textAlign="end";

context.fillText("textAlign=end", 400, 200);

context.textAlign="left";

context.fillText("textAlign=left", 400, 280);

context.textAlign="center";

context.fillText("textAlign=center", 400, 360);

context.textAlign="right";

context.fillText("textAlign=right", 400, 480);

};