POPSブログ

CreateJS フォントマスクと、Webフォントテキストアニメーション2

318

  Category:  javascript2014/08/17 pops 

WebフォントテキストアニメーションとをGraphicsクラスで描画するフォントマスクの組み合わせです。デザイン変更には有効ですから、シミュレーションも付けてみました。
easeljs-0.7.1 でのテストです。

 

CreateJS フォントマスクと、Webフォントテキストアニメーションのテスト

通常のフォントが、Webフォントに変更されただけですが、独自の文字を使えますから一応デザイン的には有効性があると思います。但し、Graphicsクラスで描画するフォントマスクの作り方は特殊です。


 

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

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


//日本語
//createJS100.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="WELCOME";
//ロゴテキスト2
var logostring2="Merry Christmas";

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

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

//ステージ
var stage;
//コンテナなど
var backrect;
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;

//imageMASKコンテナ
var imagemaskbox;
//読み込み画像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=["#000000","#FFFFFF","#BC8F8F","#4682B4","#6B8E23","#888888","#333333"];

var font_name;
var font_name2;
var font_name3;
var familys=["GauFontMilkChoco","Nunito","Limelight"];

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

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

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

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

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

	//ダミーCanvasTEXT
	dmytext_draw2();

	//imageMASKコンテナ使用
	imagemaskbox=new createjs.Container();
	stage.addChild(imagemaskbox);

	//簡易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!");

	//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);

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

	//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);

/*
	//compositeOperation/Safariはだめ
	//IMAGE
	var maskImage=new createjs.Bitmap(backphotos[0]);
	maskImage.regX=canvasWidth/2;
	maskImage.regY=canvasHeight/2;
	//MASK-TEXT MASK/GauFontMilkChoco
	var maskText=new createjs.Text("WELCOME","60px GauFontMilkChoco","#FFFFFF");
	maskText.textAlign="center";
	maskText.textBaseline="middle";
	maskText.scaleX=3;
	maskText.scaleY=3;
	maskText.rotation=-20;
	maskText.compositeOperation="destination-in";//画像が下にあること
	imagemaskbox.addChild(maskImage,maskText);//
	imagemaskbox.x=canvasWidth/2;
	imagemaskbox.y=canvasHeight/2;
*/

	//MASK画像 MASK/GauFontMilkChoco 434x58
	var maskShape=new createjs.Shape();
	maskShape.graphics.beginFill("#FFFFFF").drawCanvasSvgEx(0,0);
	maskShape.regX=434/2;
	maskShape.regY=58/2;
	maskShape.scaleX=3;
	maskShape.scaleY=3;
	maskShape.rotation=-20;
	maskShape.visible=false;//非表示
	//IMAGE
	var maskImage=new createjs.Bitmap(backphotos[0]);
	maskImage.regX=canvasWidth/2;
	maskImage.regY=canvasHeight/2;
	imagemaskbox.addChild(maskShape,maskImage);
	maskImage.mask=maskShape;
	imagemaskbox.x=canvasWidth/2;
	imagemaskbox.y=canvasHeight/2;

	//画像があれば
	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="Nunito";//Nunito

	//インスタンス配列取得
	//CanvasW,H,サイズ,フォント,色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示
	textChip=createMoveOutlineTextCanvas_C(50,50,"40px",font_name2,"#FFFFFF",outline_w,true,text_spc,"#000000",true,img,img_alpha,mainstring,false);
	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]);
		//ポジション取得
		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(textshadow)
		.call(finshmove);//現在何もしない
	}

}

//MOVE-画像修飾Outlineテキストインスタンスを作る1
//reg原点中央補正コンテナ収容
//CanvasW,H,サイズ,フォント,色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示
function createMoveOutlineTextCanvas_C(CanvasW,CanvasH,size,font,color,outline_w,rainbow,space,scolor,shadow,img,imgalpha,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();

		//ダミー文字インスタンスを作る
		var t=new createjs.Text("",fontdata,"#FFFFFF");
		t.outline=outline_w;
		//1文字入れる
		t.text=text;
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

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

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

		//base
		var canvas=document.createElement("canvas");
		canvas.width=CanvasW;
		canvas.height=CanvasH;
		var ctx=canvas.getContext("2d");
		ctx.strokeStyle=color;

		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 shadow_txt=new createjs.Bitmap(canvas);
		shadow_txt.name="base";
		//原点中央
		shadow_txt.regX=CanvasW/2;
		shadow_txt.regY=CanvasH/2;
		//base表示
		if(!base) {shadow_txt.visible=false;}

		//画像
		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.strokeStyle=pattern;
		ctx.font=fontdata;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.lineJoin="miter";
		ctx.miterLimit=outline_w/2;
		ctx.globalAlpha=imgalpha;
		//stroke
		ctx.lineWidth=outline_w;
		ctx.strokeText(text,CanvasW/2,CanvasH/2);
		var img_txt=new createjs.Bitmap(canvas);
		//原点中央
		img_txt.regX=CanvasW/2;
		img_txt.regY=CanvasH/2;

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

		contna.width=w;
		contna.height=h;
		contna.addChild(shadow_txt,img_txt);

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

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

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

	//LOGOテキストアニメーション
	var logotext_W=0;
	var text_spc=-10;//テキストスペース
	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="GauFontMilkChoco";

	//インスタンス配列取得
	//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	textChip2=createMoveOutlineTextCanvas_D(100,100,"80px",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(textshadow2)
		.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=0;//テキストスペース
	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="Limelight";//Limelight Riesling Serif

	//インスタンス配列取得/ラインなし
	//CanvasW,H,サイズ,フォント,文字色,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	textChip3=createMoveImageText_A(80,80,"40px",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() {
	//base表示
	this.getChildByName("base").visible=true;

}
//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);
	}
}

//--------------------------------------------------------------------------------------
//マスクの文字描画
createjs.Graphics.prototype.drawCanvasSvgEx=function(x,y) {

	//GauFontMilkChoco 434x58
	this.moveTo(60.272949, 23.087402);
	this.bezierCurveTo(60.272888, 29.616238, 57.968691, 34.608421, 53.360352, 38.063965);
	this.bezierCurveTo(48.560009, 41.711441, 41.383747, 43.535170, 31.831543, 43.535156);
	this.bezierCurveTo(31.447721, 43.535170, 30.967986, 43.535170, 30.392334, 43.535156);
	this.lineTo(30.392334, 46.200439);
	this.bezierCurveTo(30.392303, 49.223885, 29.072113, 51.791753, 26.431763, 53.904053);
	this.bezierCurveTo(23.791357, 56.016358, 20.599099, 57.072510, 16.854980, 57.072510);
	this.bezierCurveTo(13.112291, 57.072510, 9.920765, 56.016358, 7.280395, 53.904053);
	this.bezierCurveTo(4.640009, 51.791753, 3.319820, 49.223885, 3.319824, 46.200439);
	this.lineTo(3.319824, 23.087402);
	this.bezierCurveTo(3.319820, 16.608439, 5.624017, 11.616989, 10.232422, 8.113037);
	this.bezierCurveTo(15.032699, 4.464164, 22.232399, 2.639703, 31.831543, 2.639648);
	this.bezierCurveTo(41.383747, 2.639703, 48.560009, 4.464164, 53.360352, 8.113037);
	this.bezierCurveTo(57.968691, 11.616989, 60.272888, 16.608439, 60.272949, 23.087402);
	this.closePath();
	this.moveTo(30.392334, 34.752686);
	this.bezierCurveTo(30.392303, 35.471945, 30.872038, 35.831564, 31.831543, 35.831543);
	this.bezierCurveTo(32.744107, 35.831564, 33.200405, 35.471945, 33.200439, 34.752686);
	this.lineTo(33.200439, 11.784668);
	this.bezierCurveTo(33.200405, 11.015671, 32.744107, 10.631150, 31.831543, 10.631104);
	this.bezierCurveTo(30.872038, 10.631150, 30.392303, 11.015671, 30.392334, 11.784668);
	this.closePath();

	this.moveTo(91.545654, 57.072510);
	this.bezierCurveTo(81.993384, 57.072510, 74.792952, 55.224611, 69.944336, 51.528809);
	this.bezierCurveTo(65.337395, 48.071786, 63.033931, 43.103774, 63.033936, 36.624756);
	this.lineTo(63.033936, 23.087402);
	this.bezierCurveTo(63.033931, 16.608439, 65.337395, 11.616989, 69.944336, 8.113037);
	this.bezierCurveTo(74.792952, 4.464164, 81.993384, 2.639703, 91.545654, 2.639648);
	this.bezierCurveTo(101.097860, 2.639703, 108.297560, 4.464164, 113.144780, 8.113037);
	this.bezierCurveTo(117.704770, 11.616989, 119.984800, 16.608439, 119.984860, 23.087402);
	this.lineTo(119.984860, 36.624756);
	this.bezierCurveTo(119.984800, 43.103774, 117.704770, 48.071786, 113.144780, 51.528809);
	this.bezierCurveTo(108.297560, 55.224611, 101.097860, 57.072510, 91.545654, 57.072510);
	this.closePath();
	this.moveTo(90.104248, 48.215332);
	this.bezierCurveTo(90.104216, 48.984383, 90.584684, 49.368904, 91.545654, 49.368896);
	this.bezierCurveTo(92.505093, 49.368904, 92.984829, 48.984383, 92.984863, 48.215332);
	this.lineTo(92.984863, 11.784668);
	this.bezierCurveTo(92.984829, 11.015671, 92.505093, 10.631150, 91.545654, 10.631104);
	this.bezierCurveTo(90.584684, 10.631150, 90.104216, 11.015671, 90.104248, 11.784668);
	this.closePath();

	this.moveTo(179.788570, 23.087402);
	this.bezierCurveTo(179.788510, 29.616238, 177.484320, 34.608421, 172.875980, 38.063965);
	this.bezierCurveTo(168.075630, 41.711441, 160.899370, 43.535170, 151.347170, 43.535156);
	this.bezierCurveTo(150.963350, 43.535170, 150.483610, 43.535170, 149.907960, 43.535156);
	this.lineTo(149.907960, 46.200439);
	this.bezierCurveTo(149.907930, 49.223885, 148.587740, 51.791753, 145.947390, 53.904053);
	this.bezierCurveTo(143.306980, 56.016358, 140.114720, 57.072510, 136.370610, 57.072510);
	this.bezierCurveTo(132.627920, 57.072510, 129.436390, 56.016358, 126.796020, 53.904053);
	this.bezierCurveTo(124.155630, 51.791753, 122.835440, 49.223885, 122.835450, 46.200439);
	this.lineTo(122.835450, 23.087402);
	this.bezierCurveTo(122.835440, 16.608439, 125.139640, 11.616989, 129.748050, 8.113037);
	this.bezierCurveTo(134.548320, 4.464164, 141.748020, 2.639703, 151.347170, 2.639648);
	this.bezierCurveTo(160.899370, 2.639703, 168.075630, 4.464164, 172.875980, 8.113037);
	this.bezierCurveTo(177.484320, 11.616989, 179.788510, 16.608439, 179.788570, 23.087402);
	this.closePath();
	this.moveTo(149.907960, 34.752686);
	this.bezierCurveTo(149.907930, 35.471945, 150.387660, 35.831564, 151.347170, 35.831543);
	this.bezierCurveTo(152.259730, 35.831564, 152.716030, 35.471945, 152.716060, 34.752686);
	this.lineTo(152.716060, 11.784668);
	this.bezierCurveTo(152.716030, 11.015671, 152.259730, 10.631150, 151.347170, 10.631104);
	this.bezierCurveTo(150.387660, 10.631150, 149.907930, 11.015671, 149.907960, 11.784668);
	this.closePath();

	this.moveTo(209.909910, 21.863525);
	this.bezierCurveTo(208.948940, 21.863561, 208.468480, 21.479772, 208.468510, 20.712158);
	this.lineTo(208.468510, 19.776123);
	this.bezierCurveTo(208.468480, 19.008583, 208.948940, 18.624794, 209.909910, 18.624756);
	this.lineTo(227.837400, 18.624756);
	this.bezierCurveTo(230.573680, 18.624794, 232.925850, 17.844766, 234.893920, 16.284668);
	this.bezierCurveTo(236.861880, 14.724652, 237.845890, 12.840132, 237.845950, 10.631104);
	this.bezierCurveTo(237.845890, 8.423633, 236.861880, 6.539845, 234.893920, 4.979736);
	this.bezierCurveTo(232.925850, 3.419731, 230.573680, 2.639703, 227.837400, 2.639648);
	this.lineTo(209.909910, 2.639648);
	this.bezierCurveTo(200.020730, 2.639703, 192.796130, 4.067924, 188.236080, 6.924316);
	this.bezierCurveTo(183.676020, 9.780809, 181.395990, 14.232465, 181.396000, 20.279297);
	this.bezierCurveTo(181.395990, 26.279328, 183.676020, 30.707546, 188.236080, 33.563965);
	this.bezierCurveTo(192.796130, 36.420431, 200.020730, 37.848652, 209.909910, 37.848633);
	this.bezierCurveTo(210.821010, 37.848652, 211.276580, 38.232441, 211.276610, 39.000000);
	this.lineTo(211.276610, 39.936035);
	this.bezierCurveTo(211.276580, 40.703630, 210.821010, 41.087418, 209.909910, 41.087402);
	this.lineTo(191.909910, 41.087402);
	this.bezierCurveTo(189.173570, 41.087418, 186.821400, 41.867447, 184.853390, 43.427490);
	this.bezierCurveTo(182.885370, 44.987561, 181.901360, 46.872080, 181.901370, 49.081055);
	this.bezierCurveTo(181.901360, 51.288580, 182.885370, 53.172367, 184.853390, 54.732422);
	this.bezierCurveTo(186.821400, 56.292481, 189.173570, 57.072510, 191.909910, 57.072510);
	this.lineTo(209.909910, 57.072510);
	this.bezierCurveTo(219.749230, 57.072510, 226.948930, 55.644288, 231.509030, 52.787842);
	this.bezierCurveTo(236.069030, 49.931404, 238.349060, 45.479748, 238.349120, 39.432861);
	this.bezierCurveTo(238.349060, 33.384545, 236.069030, 28.944242, 231.509030, 26.111938);
	this.bezierCurveTo(226.948930, 23.279697, 219.749230, 21.863561, 209.909910, 21.863525);
	this.closePath();

	this.moveTo(276.459720, 2.639648);
	this.bezierCurveTo(273.578330, 2.639703, 271.129850, 3.455620, 269.114260, 5.087402);
	this.bezierCurveTo(267.098600, 6.719289, 266.090790, 8.663134, 266.090820, 10.918945);
	this.lineTo(266.090820, 47.927490);
	this.bezierCurveTo(266.090790, 48.696542, 265.611060, 49.081063, 264.651610, 49.081055);
	this.bezierCurveTo(263.690650, 49.081063, 263.210180, 48.696542, 263.210210, 47.927490);
	this.lineTo(263.210210, 10.918945);
	this.bezierCurveTo(263.210180, 8.663134, 262.202370, 6.719289, 260.186770, 5.087402);
	this.bezierCurveTo(258.171120, 3.455620, 255.723370, 2.639703, 252.843510, 2.639648);
	this.bezierCurveTo(250.010490, 2.639703, 247.574090, 3.455620, 245.534300, 5.087402);
	this.bezierCurveTo(243.494500, 6.719289, 242.474600, 8.663134, 242.474610, 10.918945);
	this.lineTo(242.474610, 38.279297);
	this.bezierCurveTo(242.474600, 44.327649, 244.418450, 48.971932, 248.306150, 52.212158);
	this.bezierCurveTo(252.193830, 55.452394, 257.642310, 57.072510, 264.651610, 57.072510);
	this.bezierCurveTo(268.731170, 57.072510, 272.667200, 55.896241, 276.459720, 53.543701);
	this.bezierCurveTo(280.202350, 55.896241, 284.114210, 57.072510, 288.195310, 57.072510);
	this.bezierCurveTo(295.203070, 57.072510, 300.650820, 55.452394, 304.538570, 52.212158);
	this.bezierCurveTo(308.426200, 48.971932, 310.370040, 44.327649, 310.370120, 38.279297);
	this.lineTo(310.370120, 10.918945);
	this.bezierCurveTo(310.370040, 8.663134, 309.350150, 6.719289, 307.310420, 5.087402);
	this.bezierCurveTo(305.270560, 3.455620, 302.834900, 2.639703, 300.003420, 2.639648);
	this.bezierCurveTo(297.123480, 2.639703, 294.675360, 3.455620, 292.659060, 5.087402);
	this.bezierCurveTo(290.642650, 6.719289, 289.634470, 8.663134, 289.634520, 10.918945);
	this.lineTo(289.634520, 47.927490);
	this.bezierCurveTo(289.634470, 48.696542, 289.154730, 49.081063, 288.195310, 49.081055);
	this.bezierCurveTo(287.234320, 49.081063, 286.753860, 48.696542, 286.753910, 47.927490);
	this.lineTo(286.753910, 10.918945);
	this.bezierCurveTo(286.753860, 8.663134, 285.746050, 6.719289, 283.730470, 5.087402);
	this.bezierCurveTo(281.714800, 3.455620, 279.291220, 2.639703, 276.459720, 2.639648);
	this.closePath();

	this.moveTo(342.316890, 37.848633);
	this.lineTo(360.316890, 37.848633);
	this.bezierCurveTo(363.053170, 37.848652, 365.405340, 37.068623, 367.373410, 35.508545);
	this.bezierCurveTo(369.341370, 33.948509, 370.325380, 32.063990, 370.325440, 29.854980);
	this.bezierCurveTo(370.325380, 27.647490, 369.341370, 25.763703, 367.373410, 24.203613);
	this.bezierCurveTo(365.405340, 22.643589, 363.053170, 21.863561, 360.316890, 21.863525);
	this.lineTo(342.316890, 21.863525);
	this.bezierCurveTo(341.404260, 21.863561, 340.947970, 21.479772, 340.948000, 20.712158);
	this.lineTo(340.948000, 19.776123);
	this.bezierCurveTo(340.947970, 19.008583, 341.404260, 18.624794, 342.316890, 18.624756);
	this.lineTo(360.316890, 18.624756);
	this.bezierCurveTo(363.053170, 18.624794, 365.405340, 17.844766, 367.373410, 16.284668);
	this.bezierCurveTo(369.341370, 14.724652, 370.325380, 12.840132, 370.325440, 10.631104);
	this.bezierCurveTo(370.325380, 8.423633, 369.341370, 6.539845, 367.373410, 4.979736);
	this.bezierCurveTo(365.405340, 3.419731, 363.053170, 2.639703, 360.316890, 2.639648);
	this.lineTo(342.316890, 2.639648);
	this.bezierCurveTo(332.764620, 2.639703, 325.588360, 4.464164, 320.788090, 8.113037);
	this.bezierCurveTo(316.181150, 11.616989, 313.877680, 16.608439, 313.877690, 23.087402);
	this.lineTo(313.877690, 36.624756);
	this.bezierCurveTo(313.877680, 43.103774, 316.181150, 48.071786, 320.788090, 51.528809);
	this.bezierCurveTo(325.588360, 55.224611, 332.764620, 57.072510, 342.316890, 57.072510);
	this.lineTo(360.316890, 57.072510);
	this.bezierCurveTo(363.053170, 57.072510, 365.405340, 56.292481, 367.373410, 54.732422);
	this.bezierCurveTo(369.341370, 53.172367, 370.325380, 51.288580, 370.325440, 49.081055);
	this.bezierCurveTo(370.325380, 46.872080, 369.341370, 44.987561, 367.373410, 43.427490);
	this.bezierCurveTo(365.405340, 41.867447, 363.053170, 41.087418, 360.316890, 41.087402);
	this.lineTo(342.316890, 41.087402);
	this.bezierCurveTo(341.404260, 41.087418, 340.947970, 40.703630, 340.948000, 39.936035);
	this.lineTo(340.948000, 39.000000);
	this.bezierCurveTo(340.947970, 38.232441, 341.404260, 37.848652, 342.316890, 37.848633);
	this.closePath();

	this.moveTo(430.652100, 41.447754);
	this.bezierCurveTo(430.652040, 46.728526, 428.035830, 50.688727, 422.803470, 53.328369);
	this.bezierCurveTo(418.003120, 55.824464, 411.138870, 57.072510, 402.210690, 57.072510);
	this.lineTo(382.268310, 57.072510);
	this.bezierCurveTo(379.915760, 57.072510, 377.899400, 56.400513, 376.219240, 55.056519);
	this.bezierCurveTo(374.539060, 53.712528, 373.698970, 52.104497, 373.698970, 50.232422);
	this.lineTo(373.698970, 9.479736);
	this.bezierCurveTo(373.698970, 7.607715, 374.539060, 5.999685, 376.219240, 4.655640);
	this.bezierCurveTo(377.899400, 3.311699, 379.915760, 2.639703, 382.268310, 2.639648);
	this.lineTo(402.210690, 2.639648);
	this.bezierCurveTo(411.138870, 2.639703, 418.003120, 3.863578, 422.803470, 6.311279);
	this.bezierCurveTo(428.035830, 8.952441, 430.652040, 12.936812, 430.652100, 18.264404);
	this.bezierCurveTo(430.652040, 23.351840, 428.251890, 27.215362, 423.451660, 29.854980);
	this.bezierCurveTo(428.251890, 32.496118, 430.652040, 36.360372, 430.652100, 41.447754);
	this.closePath();
	this.moveTo(403.652100, 11.784668);
	this.bezierCurveTo(403.652060, 11.015671, 403.171600, 10.631150, 402.210690, 10.631104);
	this.bezierCurveTo(401.251190, 10.631150, 400.771450, 11.015671, 400.771480, 11.784668);
	this.lineTo(400.771480, 25.031982);
	this.bezierCurveTo(400.771450, 25.752717, 401.251190, 26.113068, 402.210690, 26.113037);
	this.bezierCurveTo(403.171600, 26.113068, 403.652060, 25.752717, 403.652100, 25.031982);
	this.closePath();
	this.moveTo(403.652100, 34.968018);
	this.bezierCurveTo(403.652060, 34.200462, 403.171600, 33.816674, 402.210690, 33.816650);
	this.bezierCurveTo(401.251190, 33.816674, 400.771450, 34.200462, 400.771480, 34.968018);
	this.lineTo(400.771480, 48.215332);
	this.bezierCurveTo(400.771450, 48.984383, 401.251190, 49.368904, 402.210690, 49.368896);
	this.bezierCurveTo(403.171600, 49.368904, 403.652060, 48.984383, 403.652100, 48.215332);
	this.closePath();

}

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

//START
init();

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


CSS

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


/*日本語 createJS100.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フォントを保存していますので、@font-face形式で下記の様に記述します。

使用Webフォントは使用者が作成する事になります。Webフォント作成などは「こちらのページ」を参照ください。



<style type="text/css">
@font-face{ 
	font-family:'GauFontMilkChoco';
	src:url('フォントフォルダの場所/GAU_Milk_Choco.woff') format('woff');
}
@font-face{
	font-family:'Nunito';
	src:url('フォントフォルダの場所/Nunito-Bold.woff') format('woff');
}
@font-face{ 
	font-family:'Limelight';
	src:url('フォントフォルダの場所/Limelight.woff') format('woff');
}
</style>

テキストを直接 html5 Canvasコンテキストを操作しているために、Webフォントの表示が正確で有りませんので、補正をくわえます。但し、WebFont Loader 使用の場合は補正はいりません。
メモリ上などにWebフォントを記憶させると、正常になります。このところは、「前々ページ」を参照ください。



var familys=["GauFontMilkChoco","Nunito","Limelight"];
---------------------------------------------------------------------

//ダミー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);
	}
}

 

この、テキストアニメーションの、シミュレーションを実行できます。

 

フォントマスク

フォントマスクを組み合わせていますが、基本的に、現在CreateJSでフォントをGraphicsクラスで描画する事は出来ませんので工夫をしてマスクにしています。「前ページ」を参照ください
但し、compositeOperationでマスク効果を得ることも可能ですが、このデモではGraphicsクラスで描画しました。


フォントのデータをGraphicsクラスで描画しています。文字の間隔は狭めて作っています。


	//MASK画像 MASK/GauFontMilkChoco 434x58
	var maskShape=new createjs.Shape();
	maskShape.graphics.beginFill("#FFFFFF").drawCanvasSvgEx(0,0);
	maskShape.regX=434/2;
	maskShape.regY=58/2;
	maskShape.scaleX=3;
	maskShape.scaleY=3;
	maskShape.rotation=-20;
	maskShape.visible=false;//非表示
	//IMAGE
	var maskImage=new createjs.Bitmap(backphotos[0]);
	maskImage.regX=canvasWidth/2;
	maskImage.regY=canvasHeight/2;
	imagemaskbox.addChild(maskShape,maskImage);
	maskImage.mask=maskShape;
	imagemaskbox.x=canvasWidth/2;
	imagemaskbox.y=canvasHeight/2;

compositeOperationマスク処理

マスク処理は、通常はmask()で行いますが、テキストマスクは難しくなります。現在、以下の様な条件のために「デモ」ではテキスGraphicsクラスで描画出来る様に工夫をして処理しています。
compositeOperationマスク処理は簡単ですが、色々と組み合わせて処理するステージには不向きである。


1. テキストを通常のマスク材に使用できない。マスク材はGraphicsクラスで描画しなければならない。
2. mask()を使用するにはテキストをGraphicsで描画すればよいが、現在その機能は無い。
(工夫してテキストをGraphicsで描画しているが作業が大変で効率的では無い)
3. compositeOperationを使用してテキストマスクは可能であるが、制約などが多いので簡単に使用できない。


下記の様に変更すれば、compositeOperationマスク処理は可能であるが、下のアクションが機能しなくなったり、マスクすべきでない部分もマスク処理される。(組み合わせは少々難しすぎる)
設置する重なり順(階層)が違えば、図右の様になりかね無い。使用には結構工夫が必要と思います。



	//compositeOperation/Safariはだめ
	//IMAGE
	var maskImage=new createjs.Bitmap(backphotos[0]);
	maskImage.regX=canvasWidth/2;
	maskImage.regY=canvasHeight/2;
	//MASK-TEXT MASK/GauFontMilkChoco
	var maskText=new createjs.Text("WELCOME","60px GauFontMilkChoco","#FFFFFF");
	maskText.textAlign="center";
	maskText.textBaseline="middle";
	maskText.scaleX=3;
	maskText.scaleY=3;
	maskText.rotation=-20;
	maskText.compositeOperation="destination-in";//画像が下にあること
	imagemaskbox.addChild(maskImage,maskText);//
	imagemaskbox.x=canvasWidth/2;
	imagemaskbox.y=canvasHeight/2;

compositeOperation処理は簡単ですが、どうするかは、コンテンツによっても違ってくると思います、将来、機能など拡充され使い易くなるとは思うが見通しなどは不明です。
【重要】Safari(Win)はcompositeOperation機能せず、しかし使用している人は皆無と思う。Macは大丈夫と思うが未確認です。


使用Webフォント

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

Graphic Arts Unit さんの制作されたフリーフォント「GauFontMilkChoco」を使用しました。また、Webフォントとしての使用をも許可(非営利目的での使用)していただきました、感謝いたします。


GauFontMilkChoco、ガウプラ サンのフォントを使用しています。

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


画像

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


下記、Webフォント関連当方記事を参照ください。

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

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

【参照】当方の記事: CreateJS フォントをGraphicsクラスで描画する



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

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


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]