h5 Canvas での塗りつぶしとストロークのテキスト効果の例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

h5 Canvas での塗りつぶしとストロークのテキスト効果の例

零下一度

May 17, 2017 pm 02:24 PM

canvashtml5

この記事では、HTML5 キャンバステクスチャの塗りつぶしとストローク、色の塗りつぶしとストロークを実装する方法について詳しく説明します。興味のある方は以下を参照してください。皆さんのお役に立てれば幸いです。 HTML5 のキャンバスの塗りつぶしとストロークのテキスト効果、およびキャンバスに基づいてテクスチャの塗りつぶしとストロークを実装する方法を示します。
1: 色の塗りつぶしとストローク
色の塗りつぶしはfillStyleを通じて実現でき、ストロークの色はstrokeStyleを通じて実現できます。簡単な例
は次のとおりです:

// fill and stroke text 
ctx.font = &#39;60pt Calibri&#39;; 
ctx.lineWidth = 3; 
ctx.strokeStyle = &#39;green&#39;; 
ctx.strokeText(&#39;Hello World!&#39;, 20, 100); 
ctx.fillStyle = &#39;red&#39;; 
ctx.fillText(&#39;Hello World!&#39;, 20, 100);

2: テクスチャの塗りつぶしとストローク
HTML5 Canvas は、テクスチャ画像をロードしてブラシモードを作成することにより、テクスチャの塗りつぶしもサポートします。テクスチャモードを作成するための API は ctx です。 createPattern(imageTexture , "repeat"); 2 番目のパラメータは、「repeat-x」、「repeat-y」、「repeat」、および「no-repeat」という 4 つの値をサポートします。これは、テクスチャが X に沿っていることを意味します。それぞれ、軸、Y 軸、XY 方向が繰り返されるか、または繰り返されません。テクスチャストロークと塗りつぶしのコードは次のとおりです。

var woodfill = ctx.createPattern(imageTexture,"repeat"); 
ctx.strokeStyle = woodfill; 
ctx.strokeText(&#39;Hello World!&#39;, 20, 200); 
// fill rectangle 
ctx.fillStyle = woodfill; 
ctx.fillRect(60, 240, 260, 440);

テクスチャ画像:

3: ランニングエフェクト

コードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="
chr
ome=IE8"> 
<meta http-equiv="Content-type" content="text/html;char
set
=UTF-8"> 
<title>Canvas Fill And Stroke Text Demo</title> 
<link href="default.css" rel="stylesheet" /> 
<script> 
var ctx = 
null
; // global variable 2d context 
var imageTexture = null; 
window.
onload
 = function() { 
var canvas = 
document
.getElementById("text_canvas"); 
console.log(canvas.parentNode.clientWidth); 
canvas.width = canvas.parentNode.clientWidth; 
canvas.
height
 = canvas.parentNode.clientHeight; 
if (!canvas.getContext) { 
console.log("Canvas not supported. Please inst
all
 a HTML5 compatible browser."); 
return
; 
} 
// get 2D context of canvas and draw rectangel 
ctx = canvas.getContext("2d"); 
ctx.fillStyle="black"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
// fill and stroke text 
ctx.font = &#39;60pt Calibri&#39;; 
ctx.li
neW
idth = 3; 
ctx.strokeStyle = &#39;green&#39;; 
ctx.strokeText(&#39;Hello World!&#39;, 20, 100); 
ctx.fillStyle = &#39;red&#39;; 
ctx.fillText(&#39;Hello World!&#39;, 20, 100); 
// fill and stroke by pattern 
imageTexture = document.createElement(&#39;img&#39;); 
imageTexture.src = "../pattern.png"; 
imageTexture.onload = loaded(); 
} 
function loaded() { 
// delay to image loaded 
set
Time
out(textureFill, 1000/30); 
} 
function textureFill() { 
// var woodfill = ctx.createPattern(imageTexture, "repeat-x"); 
// var woodfill = ctx.createPattern(imageTexture, "repeat-y"); 
// var woodfill = ctx.createPattern(imageTexture, "no-repeat"); 
var woodfill = ctx.createPattern(imageTexture, "repeat"); 
ctx.strokeStyle = woodfill; 
ctx.strokeText(&#39;Hello World!&#39;, 20, 200); 
// fill rectangle 
ctx.fillStyle = woodfill; 
ctx.fillRect(60, 240, 260, 440); 
} 
</script> 
</head> 
<body> 
<h1 id="HTML-nbsp-Canvas-nbsp-Text-nbsp-Demo-nbsp-nbsp-By-nbsp-Gloomy-nbsp-Fish">HTML5 Canvas Text Demo - By Gloomy Fish</h1> 
<pre class="brush:php;toolbar:false">Fill And Stroke

以上がh5 Canvas での塗りつぶしとストロークのテキスト効果の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

H5：Web開発の新機能と機能Apr 29, 2025 am 12:07 AM

H5は多くの新しい機能と機能をもたらし、Webページのインタラクティブ性と開発効率を大幅に改善します。 1。SEOの強化などのセマンティックタグ。 2.マルチメディアサポートは、オーディオとビデオの再生とタグを簡素化します。 3. Canvas Drawingは、動的なグラフィックスの描画ツールを提供します。 4.ローカルストレージは、LocalStorageとSessionStorageを介してデータストレージを簡素化します。 5. Geolocation APIは、ロケーションベースのサービスの開発を促進します。

H5：HTML5の重要な改善Apr 28, 2025 am 12:26 AM

HTML5は5つの重要な改善をもたらします。1。セマンティックタグにより、コードの明確性とSEO効果が向上します。 2.マルチメディアサポートは、ビデオとオーディオの埋め込みを簡素化します。 3。フォームエンハンスメントは、検証を簡素化します。 4.オフラインおよびローカルストレージにより、ユーザーエクスペリエンスが向上します。 5。キャンバスとグラフィック機能は、Webページの視覚化を強化します。

HTML5：標準とWeb開発への影響Apr 27, 2025 am 12:12 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、オフラインストレージ、ローカルストレージ、フォームエンハンスメントが含まれます。 1。コードの読みやすさとSEO効果を改善するためのセマンティックタグなど。 2.ラベルでマルチメディアの埋め込みを簡素化します。 3。アプリケーションキャッシュやLocalStorageなどのオフラインストレージとローカルストレージは、ネットワークのない操作とデータストレージをサポートします。 4.フォームエンハンスメントでは、処理と検証を簡素化するための新しい入力タイプと検証プロパティを導入します。

H5コードの例：実用的なアプリケーションとチュートリアルApr 25, 2025 am 12:10 AM

H5は、さまざまな新機能と機能を提供し、フロントエンド開発の機能を大幅に向上させます。 1.マルチメディアサポート：メディアを埋め込んで要素を埋め込み、プラグインは必要ありません。 2。キャンバス：要素を使用して、2Dグラフィックとアニメーションを動的にレンダリングします。 3。ローカルストレージ：ユーザーエクスペリエンスを改善するために、ローカルストレージとセッションストレージを介して永続的なデータストレージを実装します。

H5とHTML5の接続：類似性と相違点Apr 24, 2025 am 12:01 AM

H5とHTML5は異なる概念です。HTML5は、新しい要素とAPIを含むHTMLのバージョンです。 H5は、HTML5に基づくモバイルアプリケーション開発フレームワークです。 HTML5はブラウザを介してコードを解析およびレンダリングしますが、H5アプリケーションはコンテナを実行し、JavaScriptを介してネイティブコードと対話する必要があります。

H5コードの構成要素：キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5：一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5：現代のウェブのビルディングブロック（H5）Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

See all articles