Html5 Canvas でのテキストのレンダリングをサポートするサンプルコード (写真)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

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

黄舟

Mar 28, 2017 pm 03:50 PM

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 までご連絡ください。

HTMLオーディオとビデオの理解：属性とアクセシビリティMay 16, 2025 am 12:05 AM

html5audioandvideolementsEnnhancedActivitionAndAcsibilitySpecificAttributes.1）The'Controls'AttributeaddsStandardPlayBackControls、while'aria-label'improvesscreenreaderAcsibility.2）

マスタリングマイクロダタ：HTML5のステップバイステップガイドMay 14, 2025 am 12:07 AM

MicrodatainHTML5enhancesSEOanduserexperiencebyprovidingstructureddatatosearchengines.1)Useitemscope,itemtype,anditempropattributestomarkupcontentlikeproductsorevents.2)TestmicrodatawithtoolslikeGoogle'sStructuredDataTestingTool.3)ConsiderusingJSON-LD

HTML5フォームの新しいものは何ですか？新しい入力タイプの調査May 13, 2025 pm 03:45 PM

HTML5INTRODUCESNEWINPUTTYPESTENHANCEUSEREXPERIENCE、SIMPRIYIFYDEVELOPMENT、およびIMPROVEACCESSIBILITY.1）自動的にEmailformat.2）FOTIMIZENUMIMERICYPAD.3）およびSimplifyDateAndtimeInputs、reducingEdeDateDateRutedolutution。

H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

See all articles