POPSブログ

CreateJS 日本語Webフォントの表示

319

  Category:  javascript2014/08/23 pops 

日本語Webフォントを表示する場合に読み込み容量を減らすため必要なフォントのみのSubsetファイルを作ります。利用できる日本語Webフォントと事前の処理、表示方法などを探ります。
easeljs-0.7.1 でのテストです。

 

CreateJS 日本語Webフォントの表示のテスト

今までは、通常の英字フォントを表示していましたが、今回は日本語Webフォントを表示します。日本語フォントは字数が多いため全て読み込むには時間がかかりますし、全て使用するとは限りませんので、使用する文字のみ読み込む方法で表示してみます。


 

DEMO


CreateJS 日本語Webフォントの表示デモ

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



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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.min.js"></script>

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


HTML (HTML5)


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

JS

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


//日本語
//createJS102.js
//WebフォントOUTLINEテキストアニメーション
//easeljs-0.7.1用

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

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//prologue表示時間
var prologue_time=12000;

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=55;//暫定

//ロゴテキスト
var logostring="ポップスウェブ工房";
//ロゴテキスト2
var logostring2="Merry Christmas";

//画像manifestリスト
var manifest=[
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/textback01.jpg",id:"text"},
{src:"/main/images/textback15.png",id:"text"}
];

//------------------------------------------------------
//変数、未使用もあり

//ステージ
var stage;
//コンテナなど
var backrect;
var maskimagecontainer;
var container;
var btncontainer;
//TEXT
var viewtext;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//LOGO-TEXT
var logotextcontainer;
var logotext;
//MOVE-TEXT2
var textChip2=[];
var textPosx2=[];
var textPosy2=[];

//LOGO-TEXT2
var logotextcontainer2;
var logotext2;
//MOVE-TEXT3
var textChip3=[];
var textPosx3=[];
var textPosy3=[];

//読み込み画像URL保存容器
var assets=[];
var loader;
var image_max;

//TextMASKコンテナ
var textMaskbox;
//読み込み画像URL保存容器
var backphotos=[];

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

//click-btn
var myhitBtn;

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

var font_name;
var font_name2;
var font_name3;

var familys=['Nixie One','WebSubsetFont','Quicksand'];

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

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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#EEEEEE").drawRect(0,0,canvasWidth,canvasHeight);

	//クリック
	backrect.addEventListener("click",backchg);
	stage.addChild(backrect);

	//ダミーCanvasTEXT
	dmytext_draw2();

	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	//LOGO-TEXT
	logotextcontainer=new createjs.Container();
	//表示位置
	logotextcontainer.x=150;
	logotextcontainer.y=80;
	stage.addChild(logotextcontainer);

	//LOGO-TEXT2
	logotextcontainer2=new createjs.Container();
	//表示位置
	logotextcontainer2.x=150;
	logotextcontainer2.y=210;
	stage.addChild(logotextcontainer2);

	//簡易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);
	set_text("LOADING NOW!");

	//btncontainer
	btncontainer=new createjs.Container();
	btncontainer.y=270;
	stage.addChild(btncontainer);
	set_btn();
	myhitBtn.visible=false;

	stage.update();

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//調整
	setTimeout(function() {

		//画像一括ロードに進む
		bulkload();

	},1000);

}

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

	//Loader
	loader=new createjs.LoadQueue(false);

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);

	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

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

	var id=event.item.id;
	//エラー無しの画像をassets容器に保存
	//画像選別
	if (id == 'text') {
		//result値
		assets.push(event.result);
	}
	if (id == 'photo') {
		//result値
		backphotos.push(event.result);
	}

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

	set_text("LOADING END!");
	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除 こちら使用に修正
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

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

			set_text("");
			
			//プロローグ表示に進む
			set_prologue();

		},2000);
	}

}

//プロローグ
function set_prologue() {

	//MAINテキストアニメ
	set_mainanime();
	//LOGOテキストアニメ
	set_logoanime();
	//LOGOテキストアニメ3
	set_logoanime3();

	//調整
	setTimeout(function() {

		//案内
		set_text("テキストアニメーションが終了したら「ボタン」を押してください。");
		//ボタン表示
		myhitBtn.visible=true;
		//自動
		//reset_text();

	},prologue_time);

}

//背景色変更
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);
}

//MAINテキストアニメ
function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	var img=assets[0];
	var img_alpha=1;

	font_name2="Nixie One";

	//TEXTクラスのみ
	textChip=createMoveText("32px",font_name2,"#FFFFFF",false,text_spc,mainstring);

	var textlen=mainstring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

	var sh=textlen-1;
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		maintextcontainer.addChild(textChip[i]);

		textChip[i].shadow=new createjs.Shadow("#000000",0,0,5);//陰影

		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=1500;}
		}

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

	//コンテナ中央補正は上で行っている
	//if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.wait(500)
		.call(finshmove);//現在何もしない
	}

}

//MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

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

//LOGOアウトラインテキストアニメ
function set_logoanime() {

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=-5;//テキストスペース
	var center=true;
	var tcount=0;
	var outline_w=2;//アウトライン幅

	//ベース表示,アウトライン表示,陰影
	var base=true;//ベース表示
	var line=true;//アウトライン表示
	var lcolor="#FFFFFF";//アウトライン色
	var shadow=true;//陰影
	var scolor="#000000";//陰影色
	var imgshadow=false;//画像陰影

	//色替え
	var colorChg=false;
	var colortype="rainbow";//rainbow rondam #FF0000

	//画像
	var img=assets[2];//アルファチャンネル画像
	var img_alpha=1;
	var fcolors=["#708090","#BBC8E6","#D2B4BC","#FDDEA5","#20B2AA","#CC7EB1","#F4B3C2","#FF69B4"];
	var fcolor=fcolors[Math.floor(Math.random()*fcolors.length)];

	font_name="WebSubsetFont";

	//インスタンス配列取得
	//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	textChip2=createMoveOutlineTextCanvas_D(100,100,"55px",font_name,fcolor,lcolor,outline_w,true,text_spc,scolor,true,img,img_alpha,imgshadow,logostring,base,line);

	var textlen=logostring.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		logotext_W +=textChip2[i].width;
		if(i < textlen) {logotext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}

	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*3);
	var alpha_no=1;
	var scale_no=1;
	var rotate_no=Math.floor(Math.random()*3)*chg_v;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		logotextcontainer.addChild(textChip2[i]);
		//ポジション取得
		textPosx2[i]=textChip2[i].x;
		textPosy2[i]=textChip2[i].y;

		//全幅計算は上で行っている
		//logotext_W +=textChip2[i].width;
		//if(i < textlen) {logotext_W +=text_spc;}

		//移動
		//左右
		if (pattern_no == 0) {
			textChip2[i].x=canvasWidth*flag;
			textChip2[i].y=textPosy2[i];//その場
			alpha_no=1;
			scale_no=1;
		}
		//ランダム
		if (pattern_no == 1) {
			//globalToLocal
			var point=logotextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip2[i].x=point.x;
			textChip2[i].y=point.y;
			alpha_no=0;
			scale_no=Math.floor(Math.random()*3)+1;//1-3
		}
		//その場
		if (pattern_no == 2) {
			textChip2[i].x=textPosx2[i];
			textChip2[i].y=textPosy2[i];
			alpha_no=0;
			scale_no=3;
		}

		//rotation
		textChip2[i].rotation=rotate_no*180;
		//alpha scale
		textChip2[i].alpha=alpha_no;
		textChip2[i].scaleX=scale_no;
		textChip2[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {logotextcontainer.x=(canvasWidth-logotext_W)/2;}
	logotextcontainer.y=130;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(200*i+1000)
		.to({x:textPosx2[i],y:textPosy2[i],scaleX:0.8,scaleY:0.8,alpha:1,rotation:0},1000)
		.wait(400).to({scaleX:1,scaleY:1},500);
		if(colorChg) {twn2.wait(500).call(color_chg,[colortype]);}
		twn2.wait(500)
		.call(finshmove2);//現在何もしない
	}

}

//MOVE-画像修飾Outlineテキストインスタンスを作る2
//reg原点中央補正コンテナ収容
//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
function createMoveOutlineTextCanvas_D(CanvasW,CanvasH,size,font,fcolor,lcolor,outline_w,rainbow,space,scolor,shadow,img,imgalpha,imgshadow,str,base,line) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字
		var text=str.charAt(i);

		//コンテナ
		var contna=new createjs.Container();

		//虹色
		if (rainbow) {
			fcolor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,fcolor);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//base原点中央
		t.textAlign="center";
		t.textBaseline="middle";
		if (shadow) {t.shadow=new createjs.Shadow(scolor,0,0,4);}//陰影

		//base表示
		if(!base) {t.visible=false;}

		//位置
		tpos_x +=w/2;//half
		contna.x=tpos_x;
		contna.y=tpos_y;//0

		//fill画像
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x,0,CanvasW,CanvasH,0,0,CanvasW,CanvasH);//X位置をずらした画像を得る
		var pattern=ctx.createPattern(trimming_img,"repeat");
		ctx.fillStyle=pattern;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.globalAlpha=imgalpha;

		if (imgshadow) {set_shadow (ctx,scolor);}//陰影
		//fill
		ctx.lineWidth=outline_w;
		ctx.fillText(text,CanvasW/2,CanvasH/2);
		var img_txt=new createjs.Bitmap(canvas);
		img_txt.name="image";
		//原点中央
		img_txt.regX=CanvasW/2;
		img_txt.regY=CanvasH/2;

		//line
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle=lcolor;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.lineJoin="miter";
		ctx.miterLimit=outline_w/2;

		if (shadow) {set_shadow (ctx,scolor);}//陰影
		//stroke
		ctx.lineWidth=outline_w;
		ctx.strokeText(text,CanvasW/2,CanvasH/2);
		var line_txt=new createjs.Bitmap(canvas);
		line_txt.name="line";
		//原点中央
		line_txt.regX=CanvasW/2;
		line_txt.regY=CanvasH/2;
		//base表示
		if(!line) {line_txt.visible=false;}

		//位置加算
		tpos_x +=(w/2+space);//half+space

		contna.width=w;
		contna.height=h;
		//contna.addChild(base_txt,img_txt,line_txt);
		contna.addChild(t,img_txt,line_txt);

		//コンテナ
		chip[i]=contna;
	}
	//戻り配列
	return chip;
}

//LOGOテキストアニメ
function set_logoanime3() {

	//LOGOテキストアニメーション3
	var logotext_W=0;
	var text_spc=-8;//テキストスペース
	var center=true;
	var tcount=0;

	//ベース表示,アウトライン表示,陰影
	var base=true;//ベース表示
	var shadow=true;//陰影
	var scolor="#000000";//陰影色
	var imgshadow=false;//画像陰影

	//色替え
	var colorChg=false;
	var colortype="rainbow";//rainbow rondam #FF0000

	//画像
	var img=assets[1];
	var img_alpha=1;
	var fcolors=["#708090","#BBC8E6","#D2B4BC","#FDDEA5","#20B2AA","#CC7EB1","#F4B3C2","#FF69B4"];
	var fcolor=fcolors[Math.floor(Math.random()*fcolors.length)];

	font_name3="Quicksand";

	//インスタンス配列取得/ラインなし
	//CanvasW,H,サイズ,フォント,文字色,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	textChip3=createMoveImageText_A(80,80,"70px",font_name3,fcolor,false,text_spc,scolor,true,img,img_alpha,imgshadow,logostring2,base);

	var textlen=logostring2.length;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		logotext_W +=textChip3[i].width;
		if(i < textlen) {logotext_W +=text_spc;}
	}
	//コンテナ中央ランダムのため速く決めた
	if (center) {logotextcontainer2.x=(canvasWidth-logotext_W)/2;}

	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*3);
	var alpha_no=1;
	var scale_no=1;
	var rotate_no=Math.floor(Math.random()*3)*chg_v;

	//移動
	var k=0;
	var flag=-1;

	for (var i=0; i < textlen; i++) {

		//addChild
		logotextcontainer2.addChild(textChip3[i]);
		//ポジション取得
		textPosx3[i]=textChip3[i].x;
		textPosy3[i]=textChip3[i].y;

		//全幅計算は上で行っている
		//logotext_W +=textChip3[i].width;
		//if(i < textlen) {logotext_W +=text_spc;}

		//移動
		//左右
		if (pattern_no == 0) {
			textChip3[i].x=canvasWidth*flag;
			textChip3[i].y=textPosy3[i];//その場
			alpha_no=1;
			scale_no=1;
		}
		//ランダム
		if (pattern_no == 1) {
			//globalToLocal
			var point=logotextcontainer2.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip3[i].x=point.x;
			textChip3[i].y=point.y;
			alpha_no=0;
			scale_no=Math.floor(Math.random()*3)+1;//1-3
		}
		//その場
		if (pattern_no == 2) {
			textChip3[i].x=textPosx3[i];
			textChip3[i].y=textPosy3[i];
			alpha_no=0;
			scale_no=3;
		}

		//rotation
		textChip3[i].rotation=rotate_no*180;
		//alpha scale
		textChip3[i].alpha=alpha_no;
		textChip3[i].scaleX=scale_no;
		textChip3[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//コンテナ中央
	if (center) {logotextcontainer2.x=(canvasWidth-logotext_W)/2;}
	logotextcontainer2.y=210;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn3=createjs.Tween.get(textChip3[i])
		.wait(100*i+1000)
		.to({x:textPosx3[i],y:textPosy3[i],scaleX:0.8,scaleY:0.8,alpha:1,rotation:0},800)
		.wait(200).to({scaleX:1,scaleY:1},400);
		twn3.wait(400).call(textshadow3)
		.call(finshmove3);//現在何もしない
	}

}

//MOVE-画像修飾テキストインスタンスを作る3
//reg原点中央補正コンテナ収容
//CanvasW,H,サイズ,フォント,文字色,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示
function createMoveImageText_A(CanvasW,CanvasH,size,font,fcolor,rainbow,space,scolor,shadow,img,imgalpha,imgshadow,str,base) {

	var fontdata=size + " " + font;


	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

	for (var i=0; i < len; i++) {

		//1文字
		var text=str.charAt(i);

		//コンテナ
		var contna=new createjs.Container();

		//虹色
		if (rainbow) {
			fcolor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,fcolor);
		//1文字入れる
		t.text=text;
		t.name="base";
		t.colorno=""+parseInt(i/len*360);//虹色番号文字
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//base原点中央
		t.textAlign="center";
		t.textBaseline="middle";
		if (shadow) {t.shadow=new createjs.Shadow(scolor,0,0,4);}//陰影

		//base表示
		if(!base) {t.visible=false;}

		//位置
		tpos_x +=w/2;//half
		contna.x=tpos_x;
		contna.y=tpos_y;//0

		//fill画像
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");

		//トリミング画像、X、Y、幅、高さ、
		var trimming_img=imageTrimmingCanvas(img,tpos_x,0,CanvasW,CanvasH,0,0,CanvasW,CanvasH);//X位置をずらした画像を得る
		var pattern=ctx.createPattern(trimming_img,"repeat");
		ctx.fillStyle=pattern;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.globalAlpha=imgalpha;

		if (imgshadow) {set_shadow (ctx,scolor);}//陰影
		//fill
		ctx.fillText(text,CanvasW/2,CanvasH/2);
		var img_txt=new createjs.Bitmap(canvas);
		img_txt.name="image";
		//原点中央
		img_txt.regX=CanvasW/2;
		img_txt.regY=CanvasH/2;

		if (shadow) {set_shadow (ctx,scolor);}//陰影

		//位置加算
		tpos_x +=(w/2+space);//half+space

		contna.width=w;
		contna.height=h;
		//contna.addChild(base_txt,img_txt);
		contna.addChild(t,img_txt);

		//コンテナ
		chip[i]=contna;
	}
	//戻り配列
	return chip;
}

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

//TEXT陰影処理1
function textshadow() {
	//
}
//TEXT陰影処理2
function textshadow2() {
	//
}
//TEXT陰影処理3
function textshadow3() {
	//
}

//色替
function color_chg(colortype) {

	if(!colortype) {return}//指定なし
	//保存虹色番号
	var no=this.getChildByName("base").colorno*1;
	if(colortype == 'rainbow'){this.getChildByName("base").color=createjs.Graphics.getHSL(no,100,50);
	} else if(colortype == 'random'){this.getChildByName("base").color=createjs.Graphics.getHSL(Math.floor(Math.random()*360),100,50);
	} else {this.getChildByName("base").color=colortype;}//指定色
}

//終了
function finshmove () {
	//
}
//終了2
function finshmove2 () {
	//
}
//終了3
function finshmove3 () {
	//
}

//reset_text
function reset_text() {

	set_text("クリア");
	myhitBtn.visible=false;

	//コンテナの中を削除
	maintextcontainer.removeAllChildren();
	logotextcontainer.removeAllChildren();
	logotextcontainer2.removeAllChildren();

	//調整
	setTimeout(function() {
		set_text("ランダムアニメ実行中");
		set_prologue();
	},1000);

}

//tickステージ
function tick() {
	stage.update();
}
//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

//rainbow-Color
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//create-text未使用
function create_text(size,font,color,string) {

	var fontdata=size + " " + font;
	var t=new createjs.Text("",fontdata,color);
	t.text=string;
	var w=t.getMeasuredWidth();
	var h=t.getMeasuredHeight();
	//大きさ設定、受け渡しに重要
	t.width=w;
	t.height=h;
	//原点中央
	t.regX=w/2;
	t.regY=h/2;
	return t;

}
//Create-Bottunボタンを作る
function set_btn() {

	//ラベル文字生成
	var label="CLICK";
	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF",label,"#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=(canvasWidth-60)/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_text);
	//addChild
	btncontainer.addChild(myhitBtn);

}

//create-bottunベタ塗り
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginFill(outc).drawRoundRect(x,y,w,h,r);
	btn.addChild(s);

	//myBtn shadow onMouseOverでupdate()すると濃くなる
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(overc).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginFill(outc).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//Textに陰影Blur4
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=4;//3-5
}

//変換は配列で返す
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;
}

//トリミング画像、X、Y、幅、高さ、
function imageTrimmingCanvas(patternimg,sx,sy,sw,sh,dx,dy,dw,dh) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=sw;
	canvas.height=sh;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,sx,sy,sw,sh,dx,dy,dw,dh);

	return canvas;
}

//ダミーテキスト処理2
function dmytext_draw2() {

	//canvas用
	var canvas=document.createElement("canvas");
	canvas.width=10;
	canvas.height=10;
	var text="E";
	for (var i=0; i < familys.length; i++) {
		var ctx=canvas.getContext("2d");
		ctx.fillStyle="#FFFFFF";
		ctx.font="1px "+ familys[i];
		ctx.fillText(text,0,0);
	}
}

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

//START
onload=init;

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


CSS

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


/*日本語 createJS102.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
text-align:center;
}

#image-box {
/*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:#000000;
}

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

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


 

簡単な説明


[説明図]

 

日本語Webフォントと読み込み

日本語Webフォントとして使用出来る、フリーフォントは結構あるようです。


1. 日本語フリーフォントを探す。
2. 必要であれば、サブセットフォントメーカーでSubsetファイルを作れば読み込みが早くなる。
3. フォントの読み込み方法は前回と同じですから省略します。
4. CreateJS用として、Webフォントは .woff のみ使用します。


日本語フリーフォント

ここでは、ロゴデザイン用のフォントとして、「自家製フォント工房」サン配布の丸ゴシック、Round M+を「デモ」で使用してみました。

【FreeFont】mm.xvs.jp: 自家製フォント工房


日本語フリーフォント情報は下記サイトなど参照ください。

【FreeFont情報】matome.naver.jp: 日本語WEBフォント情報(+アイコンフォント) 最新-2014.08

【FreeSoft情報】liskul.com: これが欲しかった!フリーフォント22選 (日本語対応/商用可/無料)


サブセットフォントメーカー

英字ならばファイルサイズが 20-40KB 位ですが、日本語用ファイルサイズは 3000-4000KB にもなります。使用しない文字もありますので全部読み込む訳には参りません。こんな時必要文字だけのサブセットを作る訳です。


フォントから指定された文字列だけを取り出して、ファイルサイズを小さく作成するソフトで、「WOFFコンバータ」と同じ「武蔵システム」サンのフリーソフトが便利です。用途に応じて個人でサブセットを作ります。
サブセット作成後「WOFFコンバータ」で .woff 変換し、サイトにUpLoadしてWebフォントをCanvasで使用します。


【FreeSoft】opentype.jp: サブセットフォントメーカー

作業フォルダを作り、通常のTTFフォントなど格納する。
最初は空のサブセットファイルを用意する(サブセットファイル名.ttfなど)。
フォント名を指定して、変換すれば同じフォルダに上書きされる。「WOFFコンバータ」起動すれば、同じフォルダに.woffファイルが出来る。
漢字を追加変更したいなら、追加変更上書きすれば良い、追加変更に重点をおいているようなので最初は注意。

収容文字、フォント名、サブセットファイル名などメモにしてキチント管理しないと後々大変になります。


実際の「デモ」での作業

漢字テキスト毎にサブセットを作成するのも管理上大変なので、文字を追加して上書きした方が、1ファイルで済むので判り易いかも知れない。(rounded-mplus-1c-bold.ttf使用)


1. 丸ゴシック、rounded-mplus-1c-bold.ttf を用意する。
2. 「サブセットフォントメーカー」でサブセット化する。
3. 「WOFFコンバータ」で Webフォントに変換。
4. 出来たWebフォントをサイトにUpLoadして利用する。


漢字の表示

Webフォントの読み込み方法は沢山あるが、下記の@font-face形式で他の細いラインの文字と共に読み出してみる。
デモでの、各テキストは直接Canvas操作して描画しているので、JS補正をしている。(デモ参照)


簡単な@font-face形式での読み込み。



<style type="text/css">
@font-face{ 
font-family:'Nixie One';
	src:url('/main/asset/NixieOne-Regular.woff') format('woff');
}
@font-face{ 
font-family:'WebSubsetFont';
	src:url('/main/asset/popsSubFont.woff') format('woff');
}
@font-face{ 
font-family:'Quicksand';
	src:url('/main/asset/Quicksand-Light.woff') format('woff');
}
</style>

@font-face形式のため、JS補正を下記の様に行いました。

直接Canvas操作して描画している部分にフォントを認識させる為の処理です。(WebFont Loader利用、CreateJS TextClassで表記の場合は必要ない)



var familys=['Nixie One','WebSubsetFont','Quicksand'];

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

//ダミーCanvasTEXT
dmytext_draw2();

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

//ダミーテキスト処理2
function dmytext_draw2() {

	//canvas用
	var canvas=document.createElement("canvas");
	canvas.width=10;
	canvas.height=10;
	var text="E";
	for (var i=0; i < familys.length; i++) {
		var ctx=canvas.getContext("2d");
		ctx.fillStyle="#FFFFFF";
		ctx.font="1px "+ familys[i];
		ctx.fillText(text,0,0);
	}
}

 

細いラインの英字

今までは比較的太い文字を装飾してきましたが、細いラインの文字も修飾できますが、中間の日本語表示のような、太さがないので outline には向きません。
上のmaintextは装飾なしのテキストで、Textクラスのみで構成していますので軽量になります。
下のlogoは画像塗りのテキストです。細くとも装飾すればそれなりの効果はあると思いますが....


使用Webフォント

Webフォントは下記サイトのフリーフォントを「Webフォントに変換」して使用しています。Webフォント利用の際は、使用者の責任で作って使用してください。

Round M+、自家製フォント工房 サンのフォントを使用しています。

そのほかの英字、Font Squirrel サンのフォントを使用しています。


画像

原則、使用者が用意ください。640x300画像2枚、デモ使用の画像は「デモページ」にあります。


下記、テキストアニメ、Webフォント関連当方記事を参照ください。

【参照】当方の記事: CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)

【参照】当方の記事: CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する

【参照】当方の記事: CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正



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

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


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]