Home > Article > Web Front-end > Sample code that supports rendering text in Html5 Canvas (picture)

Sample code that supports rendering text in Html5 Canvas (picture)

黄舟Original: 2017-03-28 15:50:193150browse

html5 canvas supports rendering text;
The direct understanding is to draw the text on the canvas, and like Treat it the same as graphics (you can add shadow, gradient, pattern, color fill, etc.);
Since its essence is text, it will have some attributes unique to text ;The focus of this article is also here;
However, at the end, some examples of applying graphic fill effects to text will be added;

context.font:

[font style] [font weight] [font size] [font face]

The setting of font attributes is similar to that in css;
Example:

context.font = "italic bold 24px serif"; context.font = "normal lighter 50px cursive";

context.measureText(message):
When we Provide a text message and call this method.
It will return the metric information of a text based on the font, size, etc. set by the current contextObjectTextMetrics;
The TextMetrics object in the current html5 canvas only contains one attribute, which is width;
can be used to determine the current given string text The width in the current environment;
For example:

var metrics = context.measureText(message);
var textWidth = metrics.width;

fillText([text],[x],[y],[maxWidth]):
##Parameter meaning:
text: required The text content to be rendered on the canvas;
x,y: represents the position coordinates of the point where rendering starts;
maxWidth: represents the maximum width;

Set the color attribute of the text with it: fillStyle

strokeText([text ],[x],[y],[maxWidth]):
The meaning of the parameter is the same as fillText; compared with fillText, it refers to the outline of the rendered text;
The matching color attribute of the text is set: strokeStyle

##Canvas has support for text alignment. Includes two options: horizontal Horizontal alignment and vertical Vertical alignment;

context.textAlign: text horizontal alignment. Possible attribute values: start, end, left, right, center. Default value: start.
context.textBaseline: Text vertical alignment. Possible attribute values: top, hanging, middle, alphabetic, ideographic, bottom. Default value: alphabetic.

Horizontal alignment选项:center|start|end|left|right
例：context.textAlign = "center";

当我们把一段文本渲染在canvas上时，文本本身显示在画布上，会占据一个矩形块（看不见的矩形，我们暂且称其为IBox(invisible bounding box)）；

这里提到的对齐方式，都是针些这个文本所占据的这个IBox来操作的（IBox有，上，下，左，右四条边线）；

把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心)；textAlign为默认值，应用不同的textBaseline所产生的效果如下图：

把字符串“HA”在画布的中心点位置(两条黑色直线相交点为中心)；textBaseline为默认值，应用不同的textAlign所产生的效果如下图：

大家可以细细品味一下，它们的区别……

实例：

基本属性展示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="modernizr-latest.js"></script>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded() {
canvasApp();
}

function canvasSupport() {
return Modernizr.canvas;
}

function eventWindowLoaded() {
canvasApp();
}

function canvasApp() {
var message = "your text";
var fillOrStroke = "fill";
var fontSize = "50";
var fontFace = "serif";
var textFillColor = "#ff0000";
var textBaseline = "middle";
var textAlign = "center";
var fontWeight = "normal";
var fontStyle = "normal";

if(!canvasSupport()) {
return;
}

var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox");
formElement.addEventListener(&#39;keyup&#39;, textBoxChanged, false);
formElement = document.getElementById("fillOrStroke");
formElement.addEventListener(&#39;change&#39;, fillOrStrokeChanged, false);
formElement = document.getElementById("textSize");
formElement.addEventListener(&#39;change&#39;, textSizeChanged, false);
formElement = document.getElementById("textFillColor");
formElement.addEventListener(&#39;change&#39;, textFillColorChanged, false);
formElement = document.getElementById("textFont");
formElement.addEventListener(&#39;change&#39;, textFontChanged, false);
formElement = document.getElementById("textBaseline");
formElement.addEventListener(&#39;change&#39;, textBaselineChanged, false);
formElement = document.getElementById("textAlign");
formElement.addEventListener(&#39;change&#39;, textAlignChanged, false);
formElement = document.getElementById("fontWeight");
formElement.addEventListener(&#39;change&#39;, fontWeightChanged, false);
formElement = document.getElementById("fontStyle");
formElement.addEventListener(&#39;change&#39;, fontStyleChanged, false);

drawScreen();

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);

context.lineWidth = 1;
context.beginPath();
context.moveTo(theCanvas.width / 2, 0);
context.lineTo(theCanvas.width / 2, theCanvas.height);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(0, theCanvas.height/2);
context.lineTo(theCanvas.width, theCanvas.height/2);
context.stroke();
context.closePath();

//Text
context.textBaseline = textBaseline;
context.textAlign = textAlign;
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
switch(fillOrStroke) {
case "fill":
context.fillStyle = textFillColor;
context.fillText(message, xPosition, yPosition);
break;
case "stroke":
context.strokeStyle = textFillColor;
context.strokeText(message, xPosition, yPosition);
break;
case "both":
context.fillStyle = textFillColor;
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 textFillColorChanged(e) {
var target = e.target;
textFillColor = "#" + target.value;
drawScreen();
}

function textFontChanged(e) {
var target = e.target;
fontFace = target.value;
drawScreen();
}

function textBaselineChanged(e) {
var target = e.target;
textBaseline = target.value;
drawScreen();
}

function textAlignChanged(e) {
var target = e.target;
textAlign = 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>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="400" height="150">
Your browser does not support HTML5 Canvas.
</canvas>
<form>
<span>Text</span>
<input id="textBox"/>
<br/>
<span>Fill or Stroke</span>
<select id="fillOrStroke">
<option value="fill">fill</option>
<option value="stroke">stroke</option>
<option value="both">both</option>
</select>
<br/>
<span>Font</span>
<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/>
<span>font size</span>
<input type="range" id="textSize" min="0" max="200"    value="30"/>
<br/>
<span>font color</span>
<input id="textFillColor" value="FF0000"/>
<br/>
<span>font weight</span>
<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/>
<span>font style</span>
<select id="fontStyle">
<option value="normal">normal</option>
<option value="italic">italic</option>
<option value="oblique">oblique</option>
</select>
<br/>
<span>textBaseLine</span>
<select id="textBaseline">
<option value="middle">middle</option>
<option value="top">top</option>
<option value="hanging">hanging</option>
<option value="alphabetic">alphabetic</option>
<option value="ideographic">ideographic</option>
<option value="bottom">bottom</option>
</select>
<br/>
<span>TextAlign</span>
<select id="textAlign">
<option value="center">center</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</form>
</div>
</body>
</html>

阴影效果：

代换上面代码的drawScreen方法体

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Text
context.textBaseline = textBaseline;
context.textAlign = textAlign;
context.shadowColor = "#707070";
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 5;
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
context.fillStyle = textFillColor;
context.fillText(message, xPosition, yPosition);
}

渐变效果：

代换View Code 代码段中的drawScreen方法

function drawScreen() {
context.fillStyle = "yellow";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
var gradient = context.createLinearGradient(0, 0, theCanvas.width, 0);
context.font = "italic bold 40px serif";
gradient.addColorStop(0, "#000000");
gradient.addColorStop(.5, "#FF0000");
gradient.addColorStop(1, "#00ff00");
var xPosition = (theCanvas.width / 2);
var yPosition = (theCanvas.height / 2);
context.fillStyle = gradient;
context.fillText("message", xPosition, yPosition);
}

The above is the detailed content of Sample code that supports rendering text in Html5 Canvas (picture). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed graphic explanation of HTML5 Web StorageNext article：Detailed graphic explanation of HTML5 Web Storage

See more

Sample code that supports rendering text in Html5 Canvas (picture)

Related articles