ホームページ >ウェブフロントエンド >H5 チュートリアル >Html5 Canvas でのテキストのレンダリングをサポートするサンプルコード (写真)

Html5 Canvas でのテキストのレンダリングをサポートするサンプルコード (写真)

黄舟オリジナル: 2017-03-28 15:50:193170ブラウズ

html5 canvas はテキストのレンダリングをサポートしています。
直接理解するには、キャンバス上にテキストを描画し、それをグラフィックスのように処理します (影、グラデーション、パターン、色の塗りつぶしなどを追加できます) ;
その本質はテキストであるため、テキストに固有の属性がいくつかあります; この記事の焦点もここにあります;
ただし、最終的にはいくつかのグラフィック塗りつぶし効果がテキストに追加されます。

context.font:

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

フォント属性の設定は、CSSの設定と似ています。例:

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

context.measureText(メッセージ):

テキストメッセージを提供してこのメソッドを呼び出すと、
現在のコンテキストによって設定されたフォント、サイズなどに基づいてテキストのメトリクス情報が返されますobjectTextMetrics;
現在の html5 キャンバスでは、TextMetrics オブジェクトには width という 1 つの属性のみが含まれます。
は、現在の環境での現在の指定された stringテキストの幅を決定するために使用できます。例:

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

fillText([text],[x],[y],[maxWidth]):

パラメータの意味: text: レンダリングされるテキストコンテンツキャンバス;
x、y: レンダリングが開始される点の位置座標を表します。
は、テキストの色属性の設定とペアになります。

ストロークText([text], [x],[y],[maxWidth]):

パラメータの意味はfillTextと同じであり、アウトラインを参照します。レンダリングされたテキストの

は、テキストの色属性を設定するために使用されます:

ストロークスタイル
Canvas は、水平方向の水平方向の配置と垂直方向の垂直方向の配置を含むテキストの配置をサポートします。 context.textAlign
: テキストの水平方向の配置。可能な属性値: start、end、left、right、center。デフォルト値: start.
context.textBaseline

: テキストの垂直方向の配置。可能な属性値: トップ、ハンギング、ミドル、アルファベット、表意文字、

ボトム
。デフォルト値: アルファベット

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);
}

以上がHtml5 Canvas でのテキストのレンダリングをサポートするサンプルコード (写真)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 Webストレージの詳細な図解説明次の記事：HTML5 Webストレージの詳細な図解説明

続きを見る

Html5 Canvas でのテキストのレンダリングをサポートするサンプル コード (写真)

関連記事

Html5 Canvas でのテキストのレンダリングをサポートするサンプルコード (写真)