POPSブログ

CreateJS Canvasエレメント描画のWebFontテキストをBitmapクラスで表示する

283

  Category:  javascript2014/03/05 pops 

CreateJS CanvasエレメントにHTML5 Canvas仕様で描画したものは「装飾」等が仕易く且つ画像同様に扱えるので、Bitmapクラスで表示出来ます。WebFontでテキストを描画しましたのでより多様性が有ります。
easeljs-0.7 でのテストです。

 

CreateJS Canvasテキスト WebFont表示テスト


1. まだ、CreateJSでは文字を表示できる程度の機能で、「文字の装飾」は困難である。
2. 反面、HTML5 Canvas仕様では、ある程度「文字の装飾」が可能である。
3. 描画した、Canvasエレメントは画像同様であるためにCreateJS Bitmapクラスで表示できる。
4. WebFontを利用して効果を見て見ました。(デモ参照)


[ WebFont表示テスト 目次 ]



下図の様に、画像ではあるがFontに画像を塗りこみ「装飾文字」表示が可能となる。CreateJSのTextクラス機能が充実されるまで代替として利用できるので、詰まんなかった文字周りがキレイになります。


 

DEMO


CreateJS Canvasテキスト WebFont表示テスト、(createJS068.js)

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



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


▲[ 目次 ]

 

HTML JS CSS


▲[ 目次 ]

使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.7.0 使用)


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。

このデモでは、tweenjs-0.5.0.min.js は不要です。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box" class="radius">
		<canvas id="mainCanvas" width="640" height="300"></canvas>
	</div>
</div>

JS

createJS068.js、JS名は任意に変更可。注意、easeljs-0.7用です。

以下は、テスト表示の単なる1例ですので、実際には目的にあわせて再構築の必要が有ります。


//日本語
//createJS068.js
//CanvasテキストWebFont用
//easeljs-0.7用

//------------------------------------------------------

//canvasの大きさ
var canvasWidth=640;
var canvasHeight=300;

//文字BOXの大きさ
var logoBoxWidth=600;
var logoBoxHeight=60;

//説明TEXT
var textUse=true;

//画像リスト640x100
var manifest=[
{src:"/main/images/textback01.jpg",id:"text"},
{src:"/main/images/textback02.jpg",id:"text"},
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/textback04.jpg",id:"text"},
{src:"/main/images/textback05.jpg",id:"text"},
{src:"/main/images/textback06.jpg",id:"text"},
{src:"/main/images/textback07.jpg",id:"text"},
{src:"/main/images/textback08.jpg",id:"text"},
{src:"/main/images/textback09.jpg",id:"text"},
{src:"/main/images/textback10.png",id:"text"}
];

//------------------------------------------------------

//ステージ
var stage;
//コンテナ
var logoContainer;

//画像 Bitmapインスタンス
var logoImage,logoImage2,logoImage3,logoImage4,logoImage5;
//Back
var backrect;
//説明TEXTインスタンス
var viewtext;

//画像保存容器
var assets=[];

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

//WebFont
var webfont_name="Erica One";
var web_font=false;

//背景切り替え
var backchg_no=0;
var backcolors=["#FFFFFF","#708090","#BBC8E6","#D2B4BC","#FDDEA5","#20B2AA","#CC7EB1","#F4B3C2","#FF69B4","#EEEEEE","#888888","#555555","#000000"];

//------------------------------------------------------

//ステージ周りセット
function init() {

	//STAGE
	stage=new createjs.Stage('mainCanvas');

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);
	//クリックアクション
	backrect.addEventListener("click",backchg);

	//画像埋め込みLOGO
	logoContainer=new createjs.Container();

	//1
	logoImage=new createjs.Bitmap();
	logoImage.x=(canvasWidth-logoBoxWidth)/2;
	logoImage.y=15;
	//2
	logoImage2=new createjs.Bitmap();
	logoImage2.x=(canvasWidth-logoBoxWidth)/2;
	logoImage2.y=65;
	//3
	logoImage3=new createjs.Bitmap();
	logoImage3.x=(canvasWidth-logoBoxWidth)/2;
	logoImage3.y=115;
	//4
	logoImage4=new createjs.Bitmap();
	logoImage4.x=(canvasWidth-logoBoxWidth)/2;
	logoImage4.y=165;
	//5
	logoImage5=new createjs.Bitmap();
	logoImage5.x=(canvasWidth-logoBoxWidth)/2;
	logoImage5.y=215;

	logoContainer.addChild(logoImage,logoImage2,logoImage3,logoImage4,logoImage5);
	stage.addChild(logoContainer);

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);

	//Ticker設定
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener('tick',tick);

	//WebFont
	WebFont.load({
		google:{
			//families:[webfont_name]
			families:["Erica One","Archivo Black","Varela Round","Flamenco","Fanwood Text"]

		},
		loading:function(){
			set_text("WebFont Loading Now!");
		},
		active:function(){
			//読み込み成功
			web_font=true;
			set_text("WebFont Loading END");
			bulkload();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			set_text("WebFont None!");
			bulkload();
		}
	});

	//WebFont使用しない場合画像一括ロードに進む
	//bulkload();

}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

//bulk-load、画像一括ロード
function bulkload() {

	set_text("Loading Naw!");
	//Loaderを作る
	var loader=new createjs.LoadQueue(false);
	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、Load開始
	loader.loadManifest(manifest);

}
//各画像読み込み完了
function fileload (event) {

	assets.push(event.result);

}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;

	//簡易TEXT
	set_text("Loading End!");

	//loader Listener削除
	event.target.removeEventListener("fileload",fileload);
	event.target.removeEventListener("complete",complete);

	//画像があれば
	if (image_max) {

		//早すぎるので調整
		setTimeout(function() {

			//簡易TEXTクリア非表示
			set_text("");

			//表示に進む
			draw();

		},1000);
	}
}

//DRAW
function draw() {

	var img;

	var font_name,font_name2,font_name3,font_name4,font_name5;
	font_name=font_name2=font_name3=font_name4=font_name5="Arial";

	if(web_font) {
		font_name="Erica One";
		font_name2="Archivo Black";
		font_name3="Concert One";
		font_name4="Flamenco";
		font_name5="Fanwood Text";
	}

	//Logo
	//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
	var img=assets[1];
	var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name,"bold 46px","#6496ED","#FFFFFF",true,true,img,'POPS WEB KOUBOU');
	logoImage.image=new createjs.Bitmap(logo).image;

	var img=assets[8];
	var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name2,"bold 46px","#6496ED","#FFFFFF",false,true,img,'POPS WEB KOUBOU');
	logoImage2.image=new createjs.Bitmap(logo).image;

	var img=assets[6];
	var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name3,"bold 50px","#6496ED","#FFFFFF",false,true,img,'POPS WEB KOUBOU');
	logoImage3.image=new createjs.Bitmap(logo).image;

	var img=assets[2];
	var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name4,"bold 50px","#6496ED","#FFFFFF",false,false,img,'POPS WEB KOUBOU');
	logoImage4.image=new createjs.Bitmap(logo).image;

	var img=assets[5];
	var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name5,"bold 46px","#6496ED","#FFFFFF",false,true,img,'Pops Web Koubou');
	logoImage5.image=new createjs.Bitmap(logo).image;

}

//tick
function tick() {
	stage.update();
}

//VIEWTEXT
function set_text(t) {

	if (textUse) {
		viewtext.text=t;
		stage.update();
	}
}

//------------------------------------------------------
//LOGO-TEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
function createTextLogoCanvas (w,h,c,font,fsize,fcolor,lcolor,line,shadow,patternimg,text) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);

	var font_v=fsize +" "+ font;

	if(patternimg) {
		var pattern=ctx.createPattern(patternimg,"repeat");
		ctx.fillStyle=pattern;
	} else {
		ctx.fillStyle=fcolor;
	}

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	ctx.fillText(text,w/2,h/2);

	//TEXT-LINE
	if(line) {
		ctx.strokeStyle=lcolor;
		ctx.lineWidth=1;
		ctx.strokeText(text,w/2,h/2);
	}

	return canvas;
}

//------------------------------------------------------

//Textに陰影
function set_shadow (ctx,color) {

	//RGB変換
	rgbArr=toRgb(color);

	//Textに陰影
	//影の色オフセット距離ぼかし量
	//ctx.shadowColor="rgb(0,0,0)";

	//Graphics.getRGB利用した
	ctx.shadowColor=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]);//OK
	ctx.shadowOffsetX=0;
	ctx.shadowOffsetY=0;
	ctx.shadowBlur=3;
}

//変換は配列で返す
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

//------------------------------------------------------

//START
//init();

window.onload=function() {
	init();
}

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


● Webフォントの読み込み表示が悪い場合は、onload=function(){}、の形にして下さい。


//START
window.onload=function() {
	init();
}

CSS

createJS068.css、CSS名は任意に変更可


/*日本語createJS068.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
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:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}
canvas {
border-style:none;
background-color:transparent;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

当方のサンプルの例です。


▲[ 目次 ]


簡単な説明


▲[ 目次 ]

[説明図]

 

Fontはデザイン的にも重要な役割を果たしますが、Flashと違い「Font埋め込み」など出来ませんし、ブラウザ毎にFontが違いますので、表示出来ないFontも有ります。また、指定Fontが閲覧者のマシンにあるとは限りません。
ゆえに、同じFontを使用出来るよう、WebFontを利用する訳です。

ここでは、テキストで在っても画像としての表示ですが、多用な「文字デザイン」の可能な事が今重要です。


1. 画像としての表示なので、拡大すればボケる欠点がある。
2. アニメーションするには文字個別には操作出来ない、画像全体を扱うので在る程度の制約はある。
3. Canvas仕様が発展すれば、将来にはモット多彩に表現可能になるでしょう。
4. 一般に「英数字」ですが、WebFontを利用する事により多様性が増します。
(但し、ブラウザによっては若干の問題は有ります)
5. この「デモ」では画像埋め込みの大きなLogo文字5種類をWebFontで表示します。
6. 一応 easeljs-0.7.1でも可動します。


文字関連の設定などについては、前ページの記事に詳細を記してありますので参照下さい。

【参照】当方の記事: CreateJS Canvasエレメント描画のテキストをBitmapクラスで表示する


WebFontの表示

WebFont読み込みが成功したら、該当のFont名を与える。失敗なら「Arial」を指定します。
処理したCanvas要素をBitmap()で表示します。

当方のJSでは空のBitmap()を用意して、そこに挿入する事が多い。


//空Bitmapを配置
logoContainer=new createjs.Container();
logoImage=new createjs.Bitmap();
logoContainer.addChild(logoImage);
stage.addChild(logoContainer);

----------------------------------------------------------------------

var font_name="Arial";
if(web_font) {
	font_name="Erica One";
}

//Logo
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
var img=assets[1];
var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name,"bold 46px","#6496ED","#FFFFFF",true,true,img,'POPS WEB KOUBOU');
logoImage.image=new createjs.Bitmap(logo).image;

単にaddChild()する場合

処理は応報は個人により違うので、この辺は臨機応変に処理すれば良い。


var logo=createTextLogoCanvas (...............);
logoImage=new createjs.Bitmap(logo);
stage.addChild(logoImage);

「DEMO」でのWebFontの表示

5種類のWebFontを読み込み、画像を流し込みました。
Fontへの、画像を流し込みは比較的大きな文字にしていますが、この辺は自由になります。
詳細は前ページを参照下さい。


ブラウザにより表示出来ないFontもある

ブラウザにより表示出来ないFontもあるようです。例えば、Font名「Concert One」を指定すると図の様になります。
textBaselineが機能しないようですし画像も旨く入りません(数種類あるようだ)。
よって、Font名「Varela Round」を使用しました。こちらは問題がないようだ。


1. ブラウザにより表示出来ないFontもある。(位置制御の出来ないものもある)
2. ブラウザにより細部の描画が若干違う。
3. 表示は出来ても、画像を流し込めないFontもある。
4. 不具合の対処方法は、現時点でワタシには判りません!


不具合は表示しないと判りませんので、ブラウザ毎の確認が必要です。
ブラウザを判定して最適なFontを割り当てる事も可能ですが、大変な作業になります。


日本語の表示

日本語WebFontの読み込み表示は省略します。
日本語表示で「ゴシック」などを指定しますと、ブラウザにより表示がマチマチであり特にY方向のズレが発生します。
「Arial」指定で日本語表示の場合、比較的ズレが小さいために当方では「Arial」を使用するようにしています。


何らかの問題が発生したら

テキスト周りの「Canvas仕様基準」がまだ完全では有りませんので、自己解決する他有りません。


使用画像

テキスト背景用(埋め込み)画像、640x100、デモページに表示しています。必要な場合大きさは自由。
イイカゲン適当に作ったほうが効果がある、特にグラデーション系がキレイだ。


▲[ 目次 ]


WebFontの説明


▲[ 目次 ]

[説明図]

 

以下、同じWebFont利用のページの記事内容とほぼ同じになります。(ほぼ、そのまま転載)

【参照】当方の記事: CreateJS WebFont テキストアニメーション


Google WebFont の利用

Google WebFont利用の場合を例に、説明します。
CreateJS別冊付録 Tutorials、WebFont.htmlの例文を元に改造しました。


1. WebFontは完全に読み込みし、WebFontの準備が完了しないと使用出来ません。
2. 読み込み完了などの判定には、Googleの提供している、webfont.js を利用します。
3. WebFontの文字種はGoogle Fontsページで自由に選べます。: Google Fonts
4. Google Fontsに無い文字種を指定した場合「デモ」では Arial に成ります。


webfont.js は使用するページの HTML で事前に読み込んでおきます。(下記「webfont.js 読込み」参照)


Tutorials、WebFont.htmlの例文は以下の様になっています。


<head>
    <link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    <script type="text/javascript">
        WebFont.load({
            google: {
                families: [ 'Dorsa']
            },
            loading: function() {
                console.log("loading");
            },
            active: function () {
                window.init();
            },
            inactive: function() {
                console.log("inactive")
            }
        });
    </script>
    <script>

        var stage;
        var queue;
        function init() {

            stage = new createjs.Stage("demoCanvas");
            var txt = new createjs.Text();
            txt.x = txt.y = 0;
            txt.font = "96px Dorsa";
            txt.color = "#FF7700";
            txt.text = "Hello World!";

            stage.addChild(txt);
            stage.update();
            createjs.Ticker.addEventListener("tick", tick);
        }

        function tick() {
            stage.tick();
        }
    </script>
</head>

webfont.js 読込み

ajax.googleapis.comより、webfont.js を読み込む必要があります。

注意、複数のJSを読み込む場合は必ず「1番で読み込む」様にしないと機能しない場合があります。
通常CSSの読み込み直後に記述するのが良いと思います。旨く行かない場合は順序を変える。


<link type="text/css" href="xxx.css" />
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

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

------------------------------------------------------------------------

当方の場合は、ズルです
<script type="text/javascript" src="js/webfont.js"></script>

Google Fonts

フォントの種類などは、Google Fonts ページにて確認できます。

Google Fonts


デモでの使用例

webfont.js、の使用例に基づき、当方で使用し易いように記述した。


1. コンテンツ ステージ画面を表示してから(途中)、フォントの読み込みを行う様にした。
2. 読み込み失敗の場合は Arial を使用する様にした。(殆んど無いと思いますが、、、)


実際の「デモ」での記述は下記の様になります。


//Webフォント
var webfont_name="";
//Webフォント取得判定
var web_font=false;

---------------------------------------------------------------------------
//ステージ周りセット
function init() {

	略す

	//WebFont
	WebFont.load({
		google:{
			families:["Erica One","Archivo Black","Varela Round","Flamenco","Fanwood Text"]
		},
		loading:function(){
			set_text("WebFont Loading Now!");
		},
		active:function(){
			//読み込み成功
			web_font=true;
			set_text("WebFont Loading END");
			bulkload();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			set_text("WebFont None!");
			bulkload();
		}
	});

	略す

}

---------------------------------------------------------------------------
1フォントを読み込む場合
var webfont_name="fontA";
families:[webfont_name]

複数のフォントを読み込む場合
families:["fontA","fontB","fontC"....]

WebFont.load({........を、init の外に置いても良いが、何も表示しない「間」があるのが嫌いである。
この辺は使用者の都合で決定すれば良い。


フォントの種類を指定しない場合には、大きさも解除され、小さな文字表示になります。「エラー」「マチガイ」などの判定の材料になるかも、、、


Nullにしないで何らかの文字を入れること

var webfont_name="";

フォントサイズの指定

フォントサイズは px を指定下さい。「太字」「斜体」は下記の様に指定出来ます。
下記例はロゴ用に使用する場合です。他の場合は例に倣う。

ここでは特殊な処理で、キャンバスの大きさより文字が食み出すと表示しませんので旨く調整します。


//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
var logo=createTextLogoCanvas (キャンバス幅,キャンバス高さ,"rgba(0,0,0,0)",Font名,"bold 46px","#6496ED","#FFFFFF",true,true,画像result値,'表示テキスト');

---------------------------------------------------------------------------

「太字」
"bold 32px"

「斜体」
"italic 32px"

「太字 斜体」
"italic bold 32px"

改造した場合は、其れなりに設定下さい。


フォントの読み込み表示が悪い場合

Webフォントの読み込み表示が悪い場合は、onload=function(){}、の形にして下さい。


//START
init();

を下記の様にする
-------------------------------------------------------------
//START
window.onload=function() {
	init();
}

CreateJSは本来、onload=function(){}、の形で実行するのが一応の原則です。


▲[ 目次 ]



 

これらの改造などは自由です。


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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]