POPSブログ

CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する

315

  Category:  javascript2014/08/05 pops 

「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。
表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。

 

CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するテスト

「Google Webフォント」は便利ですが、今回はWebフォントを作り、複数のWebフォントをサイトにUploadしてCreateJSで使用する方法について調べ、実際にテストして問題があるか考慮してみます。


▼[ 簡単な説明の目次に進む ]

 

DEMO


▼[ 目次 ]


CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するデモ

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


CSS3、@font-face 使用のデモ


WebFont Loader 使用のデモ (WebFont.load()形式)


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


webfontの頒布につながってしまいますので、今回は掲載しません。

デモは、CreateJS、easeljs-0.7.1、で行いました。


 

簡単な説明


[ 簡単な説明の目次 ]



[説明図]

 

CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する

▲[ 目次 ]


1. Webフォントを作るのは簡単だが、フォントにはライセンスがあるので注意が必要です。

2. CSS3、@font-face を使用する方法は準備が手軽ですが、Canvasへの表示はブラウザにより読み込みが安定しない。(本来、Bodyの文字表示のための機能ですからCanvas向きではない)
3. WebFont Loaderを使用する方法は確実に読み込み安定しています。CreateJSでの利用ではこちらの方法が推奨です。(準備が面倒ですが、Canvasへの表示も安心です)


Webフォントを作るのは簡単です

▲[ 目次 ]


Fontを用意して、Webフォントに変換するだけですから、変換に1秒もかかりません。
但し、Fontにはライセンスが有りますので、Webフォントとして利用できるかライセンスを良く確認するか、或はWebフォントとしての使用の許可を得なければなりません。
Webフォントは簡単に取得できますので、使用者は意図シナクとも「無許可で頒布」しているのと同様な結果になってしまいますので、この点が問題な訳です。


Webフォントとして利用できるFontを探す

Webフォントとして利用できるFontは余りありませんが、下記のサイト fontsquirrel.com のものは、大部分Webフォント(英字)として利用出来るようです。但し、利用出来ないものもあるようですからライセンスを確認ください。オンラインでWebフォントに変換するサービス(FONT GENERATER)もある所ですから「至れり尽くせり」の満点サイトだ!。
色々なもの一式を生成しますので少し時間がかかりますが、開けてびっくりその親切さに脱帽だ!


国産なら、Fontの作者さんと連絡をとり、Webフォントとして利用出来るか交渉するのも方法です。(ワタシの場合はどうしても使用したいFontがあり、直接に許可をもらいました、感謝です!)


ライセンスが OFL であれば、ほぼ自由にWebフォントとして利用出来ると思います。


【 FREE FONT 】fontsquirrel.com: Font Squirrel (英字)


 

WOFFコンバータで変換

フォントを選定して「WOFFコンバータ」で変換するだけです。武蔵システムさんの、下記のフリー「WOFFコンバータ」が便利です。フォントとWebフォントのWOFF(Web Open Font Format)との相互変換を行います。超簡単!、これまた感謝!
Webフォント専用のフォルダを作り、そこに対象フォントを格納して作業すれば、区別も付き変換にも便利です。


【 WOFFコンバータ 】opentype.jp: WOFFコンバータ


WebフォントをサイトにUploadして使用する

▲[ 目次 ]


自分のサイトに専用のフォルダを作りそこに格納します。専用フォルダでなくとも構いませんが、通常の画像、ファイルと扱いなど同じですからこれも簡単です。
そこよりフォントを読み込み、ページなりで使用する事になります。Canvasでの表示ですから、事前にローカルサーバーなどでテストした方が良いかと思います。


テストの目的と条件など

以下、色々なケースでテストしますが、下記の条件で行います。


1. Webフォントは自分のサイトに保存されている。
2. CreateJSで利用して、ステージ内のテキストをWebフォントで表示する。

3. CanvasでのWebフォント表示にCSSクラスなどは通用しません。そもそもCSSの概念がない。
4. Webフォント表示の技術は、CanvasでのWebフォント表示の為のものではない。
(通常のページの文字をWebフォントで表示させるためにある、そこに急にCanvasが登場した)

 

 

CSS3、@font-face を使用する方法

▲[ 目次 ]


原則、ページの通常の文字表示のためのものですが色々と問題はあるようです。

[ CSS3、@font-face 使用のデモ ]


設定が非常に簡単です。Canvasでの表示の場合は少々不安定な部分もありますが、少量の英字の場合は余り問題にはならないようです。どうしても、旨く行かない場合はWebFont Loaderを使用ください。 Loaderを使用


@font-face でページのHtml、headに登録します。複数フォントなら下記の様に其の分、列記します。

フォント名と、フォントファイル名(.woff)です。
フォントファイル格納場所までパスは、ほとんどが自分のサイトですから、http//:xxxx.....、あるいは相対パスが使用できます。(勿論、外部からも読み込めます)



@font-face{
	font-family:'フォント名';
	src:url('フォントファイル格納場所までパス/フォントファイル名') format('woff');
}

「フォント名」は、Windowsの場合返還前のファイルを「クリック」すれば、見本を表示しますので判ります。


/font/に格納されているとすれば、(使用CMSなどにより指定は異なる)


<style type="text/css">
@font-face{
	font-family:'Nunito';
	src:url('/font/Nunito-Bold.woff') format('woff');
}
@font-face{ 
	font-family:'ChunkFive';
	src:url('/font/Chunkfive.woff') format('woff');
}
.
.
.
</style>

通常文字では、下記の様にクラスでfont-familyを指定しますが、Canvasでの表示の場合は「CSSを認識しません」から指定の必要はありません。(通常のhtmlでテキストをWebフォントにするなら指定する)


.Nunito {
	font-family:'Nunito';
}

これで、CreateJSで利用する事ができます。但しブラウザによってはタイミングが合わない場合があります。


● タイミングの調整

実際にフォントを読み込み、表示できるように準備が出来るまで時間がかかります。この辺の処理がまだ未完成のようです。(何年か経過すればよくなるでしょう)

CreateJSでは実際に表示実行するまでに、多少の処理時間を要しますので余り問題はありませんが、タイミングが合わない場合は遅延させれば解決する事もありますので、ブラウザによっても違いますから、テストで判断ください。
どうしても、旨く行かない場合はWeb FontLoaderを使用ください。 Loaderを使用


CreateJS記述JSの最初に実行する関数を init とすると、
Chromeでタイミングが合わない場合が多い、他は意外と問題が少ないようです。ローカルサーバーでは実際のサーバーより負荷が大きい事も考慮ください。


function init() {

	//内容

}

//START
window.addEventListener("load", function(){
	//遅延
	window.setTimeout(function() {
		init();
	},1000);

}, false);

● CreateJS を利用しないで直接JavaScriptでCanvas操作の場合

上記の方法では、Webフォントを読み込みますが表示しません。表示させるには html に工夫をすると表示します。

ヒントは下記サイトの記事にありますが、それでも表示しません。(ブラウザが変わっていますし、記事が古いようです)


【 参考 】risevision.com: Developer Tips & Tricks ? Using Custom Fonts with HTML5 Canvas


この点、番外ですが修正テストをして表示できるようにしてみます、このページ最終に記載


 

WebFont Loaderを使用する方法

▲[ 目次 ]


WebFont Loaderを使用した方が、上記の「CSS3、@font-face を使用する方法」より確実です。
WebFont Loaderは「google webfont」のLoaderであるwebfont.jsと同じです。
利用するWebフォントサービス、使用目的によって設定を変更するだけです。


【 WebFont Loader 】github.com: typekit/webfontloader


google(ajax.googleapis.com) から利用できます、現時点の最新バージョンは 1.4.7 のようです。



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

ワタシはずるをしてサイトにおいてある。(最新のものをおく事、問題が出る場合もある)



<script type="text/javascript" src="js/webfont.js"></script>

WebFont Loaderの設定

自分のサイトのWebフォントを読み込むにはカスタム設定で利用します。カスタム設定では、上記の @font-face のCSSが必要ですので、サイトにCSSファイルとして事前に保存しておきます。
結局、@font-face を使用しての読み込みなのですが、微妙なタイミングをJSで制御していることになります。



@font-face{
	font-family:'フォント名';
	src:url('フォントファイル格納場所までパス/フォントファイル名') format('woff');
}

「フォント名」は、Windowsの場合返還前のファイルを「クリック」すれば、見本を表示しますので判ります。


mywebfont.css、事前に保存


/* mywebfont.css */
@font-face{
	font-family:'Nunito';
	src:url('/font/Nunito-Bold.woff') format('woff');
}
@font-face{ 
	font-family:'ChunkFive';
	src:url('/font/Chunkfive.woff') format('woff');
}
@font-face{ 
	font-family:'Limelight';
	src:url('/font/Limelight.woff') format('woff');
}

WebFont Loaderの設定は「WebFont.load()形式」「WebFontConfig形式」の2種類がありますが......


WebFont.load()形式

▲[ 目次 ]


事前に、「WebFont Loader」を読み込み、「設定cssファイル」を保存(例、mywebfont.cssなど)、していること。


CreateJS を利用するなら、WebFont.load()形式を利用したほうが無難と思います。現在まで幾度か使用して問題発生は少ない。正式のCreateJSのサンプルでもこちら使用です。

[ WebFont Loader 使用のデモ ]


CSSファイル mywebfont.css が /css/ に在るとします。loading、active、inactive、は必要に応じて記載する。
init は CreateJS の最初に実行する関数とします。以下の様に記述することになります。(書き方は色々あります)




function init() {

	//内容

}

window.addEventListener("load", function(){

	//WebFont
	WebFont.load({
		custom:{
			//
			families:["Nunito","ChunkFive","Limelight"],
			urls:["/css/mywebfont.css"]

		},
		loading:function(){
			//
		},
		active:function(){
			//読み込み成功
			init();
		},
		inactive:function(){
			//読み込み失敗
			init();
		}
	});

}, false);

ブラウザに左右されずに、確実に動作します。面倒ですがJSを利用したほうが信頼性はあります。


WebFontConfig形式で記載する場合

▲[ 目次 ]


色々な条件の設定が出来ることが特徴のようだが、結構難しいので、以下簡単に表示するだけの例です。
大きな違いは「WebFont Loader」を、WebFontConfigで読み込む事です。


事前に「設定cssファイル」を保存(例、mywebfont.cssなど)、していること。


google webfont は WebFontConfig形式 で記載されていてこれと同様ですが、通常の文字表示が目的です。
ここでは、CSSの場所は自分のサイト内であり、Webフォントも自分のサイトである違いはあります。


● ページのheadに埋め込んだ場合

webfont.js を ajax.googleapis.com より読み込まないと、IE9-10で正常にWebフォントを表示しなくなる。
(webfont.jsは最新である。ローカル環境でのテストのせいかは判らない)

ページの head に埋め込んだ場合は要注意である。結構色々と「地獄」にはまってしまいそうだ。


CSSファイル mywebfont.css が /css/ に在るとします。


<script type="text/javascript">
	//WebFont
	WebFontConfig={
		custom:{
			families:['Nunito','ChunkFive','Limelight'],
			urls:['/css/mywebfont.css']
		},
	};
	(function() {
		var wf=document.createElement('script');
		wf.src=('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
		wf.type='text/javascript';
		wf.async='true';
		var s=document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(wf, s);
	})();
</script>

● JSの中に記載する場合

CSSファイル mywebfont.css が /css/ に在るとします。loading、active、inactive、は必要に応じて記載する。
init は CreateJS の最初に実行する関数とします。以下の様に記述することになります。


WebFontConfig形式 は少々難しいので、上記の WebFont.load() 形式を利用したほうが無難と思います。

webfont.js はサイト内におけるが、大事をとって ajax.googleapis.com から読み込む。
CreateJSなど使用しないで、JavaScriptで直接Canvas操作する場合は当然、1秒位の遅延をしてJSを実行しないと正常にWebフォントを表示しない。


CreateJS の場合


web_font=false;

function init() {

	//内容

}

//START
window.addEventListener("load", function(){

	//WebFont
	WebFontConfig={
		custom:{
			families:['Nunito','ChunkFive','Limelight'],
			urls:['/css/mywebfont.css']
		},
		active:function(){
			//読み込み成功
			web_font=true;
			init();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			init();
		},
	};
	(function() {
		var wf=document.createElement('script');
		wf.src=('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
		wf.type='text/javascript';
		wf.async='true';
		var s=document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(wf, s);
	})();

}, false);

 

Google WebFonts 読み込みなどを追加する

▲[ 目次 ]


これまでの、Webフォントの表示は、自サイトに保存されているものの表示でしたが、Google WebFontsを追加(併用)する場合は、CreateJS記述JSを幾らか遅延させて実行すれば、概ね表示するようです。但し完全に保障されたものではありません。


● CSSでheadから読み込み、フォント名 Dosis、太さ 400 800 の2種。

CSSで読み込むために、途中でDosis文字に切り替わるから、見た目が悪いのでお勧めできない。


<link href='http://fonts.googleapis.com/css?family=Dosis:400,800' rel='stylesheet' type='text/css'>

● JSで、自サイト、Googleからと2箇所から読み込み、下記例は、問題が多いheadから読み込みにした。

どちらもJSで読み込むために、上のような「切り替わり」が無い。
下記の様に記述したが、連結には「 , 」の書き方に注意が必要です。


<script type="text/javascript">
	//WebFont
	WebFontConfig={
		custom:{
			families:['Nunito','ChunkFive','Limelight'],
			urls:['/main/css/mywebfont.css']
		},
		google:{ families:['Dosis:400,800:latin' ] },
	};
	(function() {
		var wf=document.createElement('script');
		wf.src=('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
		wf.type='text/javascript';
		wf.async='true';
		var s=document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(wf, s);
	})();
</script>

一応、表示は正常ですが、十分なテストが必要と思います。(IE9 10も正常表示)


● CreateJS記述JS実行、ブラウザによってタイミングが合わない時は遅延させる。


//START
window.addEventListener("load", function(){
	//遅延
	window.setTimeout(function() {
		init();
	},1000);

}, false);

● CreateJS表示例、太さの設定に注意の事


var main_text=new createjs.Text("ViVa POPS ...","800 40px Dosis","#00CED1");

 

CreateJS Textクラスで表示する

▲[ 目次 ]


● CreateJS Textクラスで利用

「斜体」「太さ」「サイズ」「フォント名」の順ですが、この書式では「斜体」「太さ」は逆になっても良い(要確認)。「斜体」「太さ」は省略可能。html5 Canvas仕様に準じる。


CreateJS Textクラス書式


var テキストインスタンス=new createjs.Text("文字列","サイズ フォント名","テキスト色");

例、Webフォント名を Nunito とする。


var main_text=new createjs.Text("ViVa POPS....","40px Nunito","#00CED1");

● CreateJS「DOMElement Class」を使用して、Htmlエレメント内で利用するには、クラスでfont-familyを指定しますのでCSSを追加します。(クラス処理を追加しているので、ページの通常文字でも使用できる)

@font-face設定関連は同じです。


<style type="text/css">
@font-face{
	font-family:'Nunito';
	src:url('/font/Nunito-Bold.woff') format('woff');
}
@font-face{ 
	font-family:'ChunkFive';
	src:url('/font/Chunkfive.woff') format('woff');
}
@font-face{ 
	font-family:'Limelight';
	src:url('/font/Limelight.woff') format('woff');
}
.Nunito {
	font-family:'Nunito';
}
.ChunkFive {
	font-family:'ChunkFive';
}
.Limelight {
	font-family:'Limelight';
}
</style>

表示する


<p class="Nunito">Welcome.....</p>

クラス名は自由に出来ますが、フォント名が判るようにした方が明快と思います。


【参考、Createjs Tutorials】createjs.comの記事: EaselJS:TEXT font (createjs.com/tutorials/Fonts/)


 

Bold Italic などの指定

▲[ 目次 ]


通常、html内で文字の太さ、斜体の指定などは、何ら考えることなく指定していましたし、そして指定どおりに表示なってきましたので、単に太さ、斜体の「ブラウザに対してのレンダリング命令」と思っていました。
改めて考えてみると違うのですね、


1. Bold、指定フォントのBold体をさがして描画しなさい。
2. Italic、指定フォントのItalic体をさがして描画しなさい。


指定フォントが無い場合はブラウザがそれなりに「レンダリング」します。指定を間違えば「いい加減レンダリング」となる訳です。Webフォントを使用出来ることは重宝ですからテストでクセを掴んでください。

Webフォントには同じフォントでも「Bold体」「Italic体」の在るもの、ないものと色々ですし、自由に使えるフォントはきわめて少ない。まして全てUpLoadする訳にも参りません。
最初から「Bold体」のWebフォントに Bold 指定しても、さらに太くはならないし、逆に細くもならない、と言う訳です。
自由になるフォントもありますし、指定の方法が悪いと、別文字を表示しますので注意が必要です。


実際の指定は次の様になります。ここでの指定は、html5 Canvasのフォント指定です。
標準(normal)、其の名の通り標準の書体です。
イタリック体(Italic)、斜体(Oblique)はほとんど区別が付きませんので、Italicでよいと思います。normal italic oblique bold 小文字表記でも同じです。


「斜体」「太さ」「サイズ」「フォント名」の順ですが、この書式では「斜体」「太さ」は逆になっても良い(要確認)。



"800 40px Dosis";

"Italic Bold 80px Dosis";

"Italic 400 40px Dosis";

"40px 'Open Sans'";

次のような定義はありますが、単一な「Webフォント」では italic bold 位の指定しか出来ないと思います。


font-style 文字スタイル斜体の異なるフォント定義、normal/italic/oblique
font-weight 太さの異なるフォント定義、normal/bold、/100/200/300/400(normal)/500/600/700(bold)/800/900


より細やかな指定をしたい場合などは、書体のそろった有料の「Webフォントサービス」を利用します。
通常、Canvas表示のみならばそこまでは必要ないでしょう。


 


以下、CSS3、@font-face 方式、CreateJS を使用しない JavaScript のみの処理です。
興味のある方のみお読みください。


CreateJS を利用しないで直接JavaScriptでCanvas操作の場合の詳細

▲[ 目次 ]


CreateJS を利用しないで直接JavaScriptでCanvas操作の場合

CSS3、@font-face を使用する方法では、Webフォントを読み込みますがWebフォントをCanvas表示しません。
(但し、WebFont Loaderを使用する方法では問題はありません)

Canvas表示させるには html に工夫をすると表示します。
CreateJSなど使用せずに記述することは、プロの方以外では希薄とは思いますが、....


CreateJSを利用しない処理のデモ (JavaScript)

 

Canvasにはそもそも、HTMLタグやCSSクラスの概念が存在しないし、脱FLASHで古い仕様を持ち出したもの。
Canvasの1つのコンテキスト(ctx)に幾重にもテキストなど重ねていますので尚更厄介です。


● @font-face設定関連は同じです。Webフォントのfont-familyをクラスで指定。


@font-face{
font-family:'Nunito';
src:url('/main/asset/Nunito-Bold.woff') format('woff');
}
@font-face{ 
font-family:'ChunkFive';
src:url('/main/asset/Chunkfive.woff') format('woff');
}
@font-face{ 
font-family:'Limelight';
src:url('/main/asset/Limelight.woff') format('woff');
}

.Nunito {
font-family:'Nunito';
}
.ChunkFive {
font-family:'ChunkFive';
}
.Limelight {
font-family:'Limelight';
}

htmlページで一応表示した実績を作ります。CSSで hidden になっていますので見えません。
使用しているフォントの数だけ、下記の様にクラス別に列挙します。だましの手口です。
(一度、表示することによりキャッシュされるのでしょうか?、この辺が正解と思いますが?)



<div class="Nunito" style="visibility:hidden; height:0;">ダミー文字</div>

ダミー文字の無い場合は、IE Firefox、はOK。Chrome Safari、はNG。
(ChromeはWebフォントが表示されない、Safariは何も表示されない)


<div class="Nunito" style="visibility:hidden; height:0;"></div>

下記のような2つ記述はIEはOKであるが他のブラウザはだめであるから、面倒でも分割して記述する。


.myfontfamilyClass {
	font-family:'Nunito','ChunkFive','Limelight';
}

IEはOKだがその他は Limelightのみ認識、Safariは認識しない所は非表示。


<div class="Nunito ChunkFive Limelight" style="visibility:hidden; height:0;">.</div>

よって、何らかのダミー文字を入れておく。複数フォントはそのクラス分列挙する。



<div class="Nunito" style="visibility:hidden; height:0;">.</div>
<div class="ChunkFive" style="visibility:hidden; height:0;">.</div>
<div class="Limelight" style="visibility:hidden; height:0;">.</div>


● Canvas操作JSの読み込み実行を 1秒位 遅延させる。
(ローカルでは、Chromeの認識が悪いので2秒にしている、実際のサーバーでは1秒で良いと思う)。


window.addEventListener("load", function loadHandler(evt) {
	removeEventListener("load", loadHandler);

	//遅延/Chromeが設定遅いので時間を長く
	window.setTimeout(function() {
		set_init();
	},1000);
});

上記の修正で、現在、表示出来るがブラウザバージョンによっては表示の保障はない。将来のミトウシはありません。
つまり、いつ不可解なことが起きても不思議ではない、大変ですネ.......

CreateJS などを利用しないで直接Canvas操作はあまりないと思いますが、問題が起きた時の解決の糸口になる。
WebFont Loaderを使用する場合は、このような面倒はいりません。


 

このサンプルの、HTML JS CSS


HTML


<div class="Nunito" style="visibility:hidden; height:0;">.</div>
<div class="ChunkFive" style="visibility:hidden; height:0;">.</div>
<div class="Limelight" style="visibility:hidden; height:0;">.</div>

<div id="demo-wrap2">
	<div id="image-box2" class="radius"><canvas id="subCanvas" width="640" height="300"></canvas></div>
</div>

CSS


#demo-wrap2 {
position:relative;
width:auto;
height:320px;
text-align:center;
}
#image-box2 {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#FFFFFF;
}

#image-box2 #subCanvas {
border-radius:10px;
}
.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

JS


//Html5Canvas
(function(window) {

	//文字Nunito/ChunkFive/Limelight
	function set_init() {

		var backchg_no=0;
		var backcolors=["#FFFFFF","#BC8F8F","#4682B4","#6B8E23","#CCCCCC","#888888","#333333","#000000"];

		var canvas=document.getElementById("subCanvas");
		canvas.width=640;
		canvas.height=300;
		var ctx=canvas.getContext("2d");
		ctx.fillStyle="rgba(0,0,0,0)";
		ctx.fillRect(0,0,640,300);

		//TEXT1
		ctx.strokeStyle="#00CED1";
		ctx.font="40px Nunito";
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.lineWidth=2;
		//ctx,color x,y,blur
		set_textshadow (ctx,"rgb(0,0,0)",0,0,4);//shadow上まで全部つく
		ctx.strokeText("ViVa POPS WEB KOUBOU", 320, 60);

		//TEXT2
		ctx.fillStyle="#FFD700";
		ctx.font="80px ChunkFive";
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		set_textshadow (ctx,"rgb(0,0,0)",1,1,5);//shadow
		ctx.fillText("WELCOME", 320, 150);
		ctx.strokeStyle="#FFFFFF";
		ctx.lineWidth=2;
		ctx.strokeText("WELCOME", 320, 150);

		//TEXT3
		ctx.fillStyle="#FF1493";
		ctx.font="40px Limelight";
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		set_textshadow (ctx,"rgb(255,0,255)",0,0,4);//shadow
		ctx.fillText("Merry Christmas", 320, 230);

		//css clickaction
		canvas.onclick=function(){
			var element=document.getElementById("image-box2");
			backchg_no ++;
			if (backchg_no > backcolors.length-1) {backchg_no=0;}
			var color=backcolors[backchg_no];
			element.style.backgroundColor=color;
		};

	}

	//Textに陰影
	function set_textshadow (ctx,color,x,y,blur) {
		ctx.shadowColor=color;
		ctx.shadowOffsetX=x;
		ctx.shadowOffsetY=y;
		ctx.shadowBlur=blur;
	}

	window.addEventListener("load", function loadHandler(evt) {
		removeEventListener("load", loadHandler);

		//遅延/Chromeが設定遅いので時間を長く
		window.setTimeout(function() {
			set_init();
		},2000);
	});

}(window));

大変面倒ですが、この現象は後に、CreateJSでの不具合解決のヒントになります。


その他

▲[ 目次 ]


使用Webフォント

当方で頒布する訳には参りませんので、Webフォント利用の際は、使用者の責任で作って使用してください。

Webフォントは、Font SquirrelサンのフォントをWebフォントに変換して使用しています。


最後に

以上は、CreateJS使用に特化してのテストですし、色々な方法があると思います。Webフォントの使用はデザイン上重要と思います。英字フォントなら比較的容量が軽いですから手軽に利用できます。
現時点のテスト結果であり、時間の経過などと共に変わってくる場合もありますので、ご理解ください。


 

この記事は以下のサイトさんの記事を参考に書きました。

 

【参考】blogspot.jpの記事: Canvas要素にwebフォントを確実に描画する方法

【参考】sophia-it.comの記事: Webフォントを指定するには?

【参考】webcre8.jpの記事: WebフォントのCSS指定2014年度版とこれまでの歩み

【参考】yomotsu.netの記事: Web フォントとライセンス

【参考】qiita.comの記事: ナウでヤングな CSS Font Loading

【参考】qiita.comの記事: IE9以降でwebfontが文字化けする原因と解決策


 

▲[ 目次 ]



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


「Webフォント」と「Canvas」は「食い合わせの悪い」食中毒のようなものだ、正露丸を飲もう。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]