canvas中绘制文本有两种方式:fillText()和strokeText(),一个是填充文本,一个是描边文本。下面是使用的填充文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fillText方法</title>
</head>
<body>
<canvas id="canvas" width="200" height="150" style="border: 1px dashed gray;display: block"></canvas>
<script>
window.onload = function () {
var c = document.getElementById("canvas");
var cxt = c.getContext('2d');
var text = "填充文本";
cxt.font = "30px 微软雅黑";
var textWidth = cxt.measureText(text).width;
var canvasWidth = c.width;
var xPosition = canvasWidth / 2 - textWidth / 2;
cxt.fillText(text,xPosition,50);
};
</script>
</body>
</html>
cxt.measureText(text).width是用来得到文本的宽度,cxt.font=“30px 微软雅黑”一定要放在其前面才行,即要先设置了字号等,再测量其值。
在canvas中绘制文本的坐标是以其左下角的坐标为准。