HTML5 Canvas学习---第七章 《Canvas文本API》
在Canvas中定义文本的最简单方法是使用CSS的font-style, font-weight,, font-size, font-face的标准值来设置context.font。
例如
context.font = "50px serif";
context.fillStyle = "$FF0000";
context.fillText = ("Hello World", 100, 80);
HTML表单和Canvas进行通信
<form>
<!-- placeholder是html5的新属性，可能有些浏览器不支持 -->
<!--可以用value代替 -->
Text: <input id="textBox" placeholder="text" />
</form>
var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', textBoxChanged, false);
function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}
在HTML中有一个很好用的方法：measureText()。当你提供字符串的时候，它会返回一些当前context对象设置的font属性。目前为止它只有一个属性：width。Width属性会给你在canvas中渲染的字符串的实际宽度。
使用measureText()的width属性，你可以设置字符串水平居中显示。
var metrics = context.measureText(message); var textWidth = metrics.width; var xPosition = (theCanvas.width-textWidth)/2
- fillText：实体文字，使用fillColor填充颜色
- strokeText：文字轮廓，使用strokeColor填充颜色
例1：本例子中我们使用一个文本框来输入我们希望在Canvas中显示的文字，并用下拉列表选择我们要显示的字体样式(实体，轮廓，实体加轮廓)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp7</title>
<script>
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var message = "your text";
var fillOrStroke = "fill";
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox");
formElement.addEventListener("keyup", textBoxChanged, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener("change", fillOrStrokeChanged, false);
drawScreen();
function drawScreen() {
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = "#000000";
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
context.font = "50px serif";
var metrics = context.measureText(message);
var textWidth = metrics.width;
//canvas中间点
var xPosition =(theCanvas.width - textWidth)/2;
var yPosition = theCanvas.height/2;
switch(fillOrStroke) {
case "fill":
context.fillStyle="#ff0000";
context.fillText(message, xPosition, yPosition);
break;
case "stroke":
context.strokeStyle = "#FF0000";
context.strokeText(message, xPosition, yPosition);
break;
case "both":
context.fillStyle="#ff0000";
context.fillText(message, xPosition, yPosition);
context.strokeStyle = "#000000";
context.strokeText(message, xPosition, yPosition);
break;
}
}
function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}
function fillOrStrokeChanged(e) {
var target = e.target;
fillOrStroke = target.value;
drawScreen();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
<br />
Text：<input id="textBox" placeholder="your text" />
<br />
Fill Or Stroke：
<select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
</body>
</html>
例2：设置字体属性
View Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>chp7</title>
<script>
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var message = "your text";
var fillOrStroke = "fill";
var fontSize = "50";
var fontFace = "serif";
var fontWeight = "normal";
var fontStyle = "normal";
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox");
formElement.addEventListener("keyup", textBoxChanged, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener("change", fillOrStrokeChanged, false);
formElement = document.getElementById("textSize");
formElement.addEventListener("change", textSizeChanged, false);
formElement = document.getElementById("textFont");
formElement.addEventListener("change", textFontChanged, false);
formElement = document.getElementById("fontWeight");
formElement.addEventListener("change", fontWeightChanged, false);
formElement = document.getElementById("fontStyle");
formElement.addEventListener("change", fontStyleChanged, false);
drawScreen();
function drawScreen() {
context.fillStyle = "#ffffaa";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = "#000000";
context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
context.font = "50px serif";
var metrics = context.measureText(message);
var textWidth = metrics.width;
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
//canvas中间点
var xPosition =(theCanvas.width - textWidth)/2;
var yPosition = theCanvas.height/2;
switch(fillOrStroke) {
case "fill":
context.fillStyle="#ff0000";
context.fillText(message, xPosition, yPosition);
break;
case "stroke":
context.strokeStyle = "#FF0000";
context.strokeText(message, xPosition, yPosition);
break;
case "both":
context.fillStyle="#ff0000";
context.fillText(message, xPosition, yPosition);
context.strokeStyle = "#000000";
context.strokeText(message, xPosition, yPosition);
break;
}
}
function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}
function fillOrStrokeChanged(e) {
var target = e.target;
fillOrStroke = target.value;
drawScreen();
}
function textSizeChanged(e) {
var target = e.target;
fontSize = target.value;
drawScreen();
}
function textFontChanged(e) {
var target = e.target;
fontFace = target.value;
drawScreen();
}
function fontWeightChanged(e) {
var target = e.target;
fontWeight = target.value;
drawScreen();
}
function fontStyleChanged(e) {
var target = e.target;
fontStyle = target.value;
drawScreen();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="300">
</canvas>
<br />
Text：<input id="textBox" placeholder="your text" />
<br />
Fill Or Stroke：
<select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
<br />
Font Style:
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<br />
Font Weight:
<select id="fontWeight">
<option value="normal">normal</option>
<option value="bold">bold</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select>
<br />
Text Font:
<select id="textFont">
<option value="serif">serif</option>
<option value="sans-serif">sans-serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<br />
Text Size:
<input type="range" id="textSize" min="0" max="200" step="1" value="50" />
</body>
</html>
浙公网安备 33010602011771号