POPSブログ

CreateJS Canvasエレメント描画の3D風テキストを作る

285

  Category:  javascript2014/03/17 pops 

CreateJS でCanvasエレメントにHTML5 Canvas仕様で描画した3D風テキストを作り、Bitmapクラスで表示します。但し完全な3Dでは無く「3Dもどき」に成ります。テキストを画像で染めますので「文字の装飾」が少し多彩に成る。
easeljs-0.7 でのテストです。

 

CreateJS Canvasエレメント描画の3D風テキストを作る 表示テスト


グラデーション処理のCanvas要素に陰影処理をした場合に、Safariで陰影を表示しない不具合が有りますが、これは修正しています。最後に残った「分解、画像塗りTEXT」タイプも少し修正してみました。


 

DEMO


CreateJS Canvasエレメント描画の3D風テキストを作る テスト、(createJS070.js)

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



Chrome Firefox Safari(Win) Opera 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

createJS070.js、JS名は任意に変更可。注意、easeljs-0.7用です。
デモのシミュレーション部分はカットしていますので同一では有りません。


//日本語
//createJS070.js
//Canvas 3DテキストSafari陰影修正済み
//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/textback03.jpg",id:"text"},
{src:"/main/images/textback12.png",id:"text"},
{src:"/main/images/textback13.png",id:"text"}
];

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

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

//画像 Bitmapインスタンス
var welcomeImage;
var logoImage,logoImage2,logoImage3;

//説明TEXTインスタンス
var viewtext;

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

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

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

//ステージ周りセット
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);

	//welcome画像層画像表示
	welcomeImage=new createjs.Bitmap("/main/images/lady_back4.png");
	stage.addChild(welcomeImage);
	//表示
	welcomeImage.visible=true;

	//画像埋め込みLOGO
	logoContainer=new createjs.Container();
	//1
	logoImage=new createjs.Bitmap();
	logoImage.x=(canvasWidth-logoBoxWidth)/2;
	logoImage.y=110;
	//2
	logoImage2=new createjs.Bitmap();
	logoImage2.x=(canvasWidth-logoBoxWidth)/2;
	logoImage2.y=175;
	//3
	logoImage3=new createjs.Bitmap();
	logoImage3.x=(canvasWidth-logoBoxWidth)/2;
	logoImage3.y=220;
	logoContainer.addChild(logoImage,logoImage2,logoImage3);
	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);

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

}

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

	set_text("Loading Now!");
	//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) {

	//result値
	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 font_name="Arial";
	var font_name2="Impact";
	var font_name3="Serif";//IE9で文字が若干大きくなる
	//var img=null;

	//-----------------1
	//3DTEXT
	var img=assets[2];
	var logo=createText3DLogo (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name2,"bold 46px","rgba(0,0,0,0)","#FFFFFF",1,false,"#000000",true,img,'POPS WEB KOUBOU');
	logoImage.image=new createjs.Bitmap(logo).image;

	//-----------------2
	//分解TEXT
	var img=assets[0];

	//パターン挿入例1
	//var img=createPatternCanvas5(10,10,"#CCCCCC","#FFFFFF");
	//パターン挿入例2
	//var img=createPatternCanvas4(100,65,"#228B22","#FF0000");
	//Rainbowパターン挿入例3
	//var img=createRainbowBox(logoBoxWidth/3,logoBoxHeight,"x");

	//幅、高さ、背景色、文字種、サイズ、間隔、文字色、画像使用、ライン色、ライン幅、ライン、パタン画像、ストリング
	var logo=createTextLogoCanvasB3 (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name,"bold 46px",-5,"#FF0000",true,"#FFFFFF",2,true,img,'WELCOME!');
	logoImage2.image=new createjs.Bitmap(logo).image;

	//-----------------3
	//標準TEXT
	var img=assets[1];
	//幅、高さ、色、文字種、サイズ、文字色、陰影、パタン画像、ストリング
	var logo=createTextStandard2 (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name3,"bold 40px","#FF69B4",true,img,'Web Design & Jyoudan!');
	logoImage3.image=new createjs.Bitmap(logo).image;

}

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

//VIEWTEXT
function set_text(t) {

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

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

//標準/Safari補正済
//幅、高さ、色、文字種、サイズ、文字色、陰影、パタン画像、ストリング
function createTextStandard2 (w,h,c,font,fsize,fcolor,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;

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";

	//Textに陰影Safari補正
	if (shadow) {
		ctx.fillStyle=fcolor;
		set_shadow (ctx,"#000000");
		ctx.fillText(text,w/2,h/2);
	}

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

	//Text
	if (shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

//LOGO-Canvasテキスト3D専用/Safari補正済
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン幅、ライン、陰影色、陰影、パタン画像、ストリング
function createText3DLogo (w,h,c,font,fsize,fcolor,lcolor,lwidth,line,scolor,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;

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに指定色陰影
	if (!scolor) {scolor="#000000";}//陰影補正

	//TEXT3D
	var dipth=4;
	var n=dipth;

	//補正用
	if(shadow) {
		ctx.fillStyle=scolor;
		//Textに陰影
		set_shadow (ctx,"#000000");
		ctx.fillText(text,w/2+dipth,h/2+dipth);
	}

	//Gradで立体に
	var pattern=ctx.createPattern(createLineGradBox(100,60,"#FFFFFF","#888888","#FFFFFF","y",2),"repeat");
	ctx.fillStyle=pattern;
	//Gradにしない
	//ctx.fillStyle=scolor;

	//深い順に描画しないと3Dにナラ無い
	for (var i=0; i < dipth; i++) {
		if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
		ctx.fillText(text,w/2+n,h/2+n);
		n -=1;
	}

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

	//上のTEXTには陰影を付けない
	if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
	//TEXT-FILL
	ctx.fillText(text,w/2,h/2);

	//TEXT-LINE
	if(line) {
	ctx.strokeStyle=lcolor;
		ctx.lineWidth=lwidth;
		//陰影a=0で消す
		if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
		ctx.strokeText(text,w/2,h/2);
	}

	return canvas;
}

//分解画像塗りTEXTテスト/Safari補正済
//幅、高さ、背景色、文字種、サイズ、間隔、文字色、画像使用、ライン色、ライン幅、ライン、パタン画像、ストリング
function createTextLogoCanvasB3 (w,h,c,font,fsize,spase,fcolor,image,lcolor,lwidth,line,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;

	ctx.font=font_v;
	ctx.textAlign="left";
	ctx.textBaseline="middle";

	var len=text.length;
	var spc=spase;//-5 0 +2 位の範囲で文字間隔補正狭める/標準0
	var all_tw=ctx.measureText(text).width;//文字全幅
	var tw=Math.floor((w-(all_tw-spc*-1*len))/2);//初期位置中央是正
	//var tw=5;//左指定なら画像パタンが正常

	//画像無し補正
	if (!patternimg) {image=false;}

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

		var t=text.charAt(i);
		var tm=ctx.measureText(t).width;

		//Safari補正用下層テキスト
		if(shadow) {
			ctx.fillStyle=fcolor;
			//ctx.fillStyle="#000000";//IE9
			set_shadow (ctx,"#000000");
			ctx.fillText(t,tw,h/2);
		}

		//画像パタン
		if (image) {
			var pattern=ctx.createPattern(patternimg,"repeat");
			ctx.fillStyle=pattern;
		} else {
			ctx.fillStyle=fcolor;
		}

		//Text
		if(shadow) {ctx.shadowBlur=0;}
		ctx.fillText(t,tw,h/2);

		//TEXT-LINE
		if(line) {
			ctx.strokeStyle=lcolor;
			ctx.lineWidth=lwidth;
			//上のLINEには陰影を付けない
			if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
			ctx.strokeText(t,tw,h/2);
		}

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

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

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

//加工虹色BOX W H TYPE
function createRainbowBox (w,h,direction) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	//方向
	if(!direction) {direction="x";}
	var gradient;

	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}

   	gradient.addColorStop(.05,"#FF0000");
	gradient.addColorStop(1/6,"#FFFF00");
	gradient.addColorStop(2/6,"#00FF00");
	gradient.addColorStop(.42,"#00C000");
	gradient.addColorStop(3/6,"#00FFFF");
	gradient.addColorStop(4/6,"#0000FF");
	gradient.addColorStop(5/6,"#FF00FF");
	gradient.addColorStop(1,"#FF0000");
	ctx.fillStyle=gradient;
	ctx.fillRect(0,0,w,h);

	return canvas;
}

//上下2色Pattern
function createPatternCanvas4 (w,h,c1,c2) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	ctx.fillStyle=c1;
	ctx.fillRect(0,0,w,h/2);

	ctx.fillStyle=c2;
	ctx.fillRect(0,h/2,w,h/2);

	return canvas;
}
//4角連続Pattern
function createPatternCanvas5 (w,h,c1,c2) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	ctx.fillStyle=c1;
	ctx.fillRect(0,0,w,h);

	ctx.fillStyle=c2;
	ctx.fillRect(0,0,w*0.8,h*0.8);

	return canvas;
}
//------------------------------------------------------

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

//TEXTの大きさGET
function getTextWH(font,fsize,string) {
	var font_v=fsize +" "+ font;
	var text=new createjs.Text(string,font_v);
	var w=text.getMeasuredWidth();
	var h=text.getMeasuredHeight();
	var textData={width:w,height:h};
	return textData;
}

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

//START
init();

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


CSS

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


/*日本語createJS070.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;
}

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


簡単な説明


新たに、HTML5 Canvas仕様での記述方法を覚えなければ成りませんがさほど大変では有りません。
テキストで在っても画像としての表示ですが、多用な「文字デザイン」の可能な事が今重要です。


 

[説明図]

 

「3Dテキスト」とは言っても驚くなかれ、概ね上記の図のような「1種類」のみです。悲しいデスナ!


 

[ 簡単な説明 目次 ]


 

 

Canvasエレメント描画の3D風テキストを作る

▲[ 目次 ]


「3D風テキスト」ですから、完全な3Dではなく見せ掛けであるが、多少くせがあり描画するにはコツが要る。
多少の問題もあるのでそれを踏まえながら作ってみた。


Safariでの不具合

テキストにグラデーション塗りをすると、陰影が付かないSafari不具合があるので、それを修正しながら作る。一般的に次ぎの条件の場合である。


1. テキストにグラデーション塗りをする場合。
2. テキストに画像塗り、またはCanvasエレメントで塗る場合(画像と同一)。

3. グラデーション塗りをするテキストの下にテキスト層を作りそこに陰影を付けて修正する。


Font名の指定

表示するマシン環境に依存しますので、原則、Font名の指定は難しい。

Fontによっては textBaseline が機能しなかったり、大きさが違ったり、ブラウザにより表示位置Y方向が微妙に違う。「デモ」では Arial、Impact、Serif、を指定してある。(勿論、Font名の指定は保障されるものではない)
Fontを必ず指定したい場合は、WebFontを使用すれば良いと思います。


表示テキスト寸法のエレメントを作る

エレメントを作る際は先に大きさを指定して作りますので、途中でエレメントの大きさの変更は出来ません。
但し、仮にCreateJS「Textクラス」のインスタンスを作り、その寸法を取得する事は可能です。ページ最後に記載しておきます。[ 表示テキストの大きさのエレメントを作る ]


この辺の詳細説明などは、下記記事を参照下さい。

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

WebFontを使用しての画像埋め込みテキスト表示は、下記参照下さい。

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


 

 

設定と構造など

3D風テキストと言ってもデザインは1つのみであるから、上記のような設定で、多少のバリエーションを持たせる。
誰でも作れるが、違っている所は3D部分をグラデーション塗りしている(形に応じていないがそこそこ見栄えは良い)。
3D部分を1ピクセル毎ずらしてテキストを描写して重ねてあるが、Canvasエレメント描画は一癖あるので注意が必要である。


その為に、右下より左上にテキストを描写して重ねて要る。最も重要なところだ。
Safariの不具合があるので、少々効率の悪い書き方になっているが、ここは仕方がない。


 

Canvasエレメントの色を、rgba(0,0,0,0.5) にすれば、図の様に配置の具合がわかる。
3D風テキストのグラデーション部分の基準はあくまでも、Canvasエレメントであるのでそこを考慮して仕上げると良い。
ブラウザにより、テキストY位置が少々違い、グラデーションがズレルがこれは仕方がない。
テキストのズレはページ下段の「表示テキストの大きさのエレメントを作る」の図をみれば判る。


陰影があるために、予期せぬことがおき易いので、何回か色々なものを作りクセを理解するほかに方法がない。言葉での表現が難しい。


1. エレメントの中に描く部材は、重なりを指定出来ない、描く順序の重なりである。
2. 陰影の影響で、描画したものが消えてしまったりの現象がおきる。
3. 意図しない所に陰影が付いたりするが、ブラウザによっても違いがあるので面倒です。
4. 陰影なしで作り、後でCreateJS「shadowフィルター」処理でも構わないが、仕上がりはキレイではない。
5. 文字にラインを入れた場合、ブラウザ、Fontの種類により描画が崩れる時もあるがこれは修正出来ない。
6. IE9でFontの種類によるが、指定の大きさより表示が大きい場合がある。(Serif)
7. シッカリ悩んでください。


● 3Dテキスト記述の1例


var font_name2="Impact";
var img=画像result値;

//ロゴをつくる
var logo=createText3DLogo (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name2,"bold 46px","rgba(0,0,0,0)","#FFFFFF",1,false,"#000000",true,img,'POPS WEB KOUBOU');
logoImage.image=new createjs.Bitmap(logo).image;

------------------------------------------------------------------
//LOGO-Canvasテキスト3D専用/Safari補正済
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン幅、ライン、陰影色、陰影、パタン画像、ストリング
function createText3DLogo (w,h,c,font,fsize,fcolor,lcolor,lwidth,line,scolor,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;

	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに指定色陰影
	if (!scolor) {scolor="#000000";}//陰影補正

	//TEXT3D
	var dipth=4;
	var n=dipth;

	//補正用
	if(shadow) {
		ctx.fillStyle=scolor;
		//Textに陰影
		set_shadow (ctx,"#000000");
		ctx.fillText(text,w/2+dipth,h/2+dipth);
	}

	//Gradで立体に
	var pattern=ctx.createPattern(createLineGradBox(100,60,"#FFFFFF","#888888","#FFFFFF","y",2),"repeat");
	ctx.fillStyle=pattern;
	//Gradにしない
	//ctx.fillStyle=scolor;

	//深い順に描画しないと3Dにナラ無い
	for (var i=0; i < dipth; i++) {
		if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
		ctx.fillText(text,w/2+n,h/2+n);
		n -=1;
	}

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

	//上のTEXTには陰影を付けない
	if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
	//TEXT-FILL
	ctx.fillText(text,w/2,h/2);

	//TEXT-LINE
	if(line) {
	ctx.strokeStyle=lcolor;
		ctx.lineWidth=lwidth;
		//陰影a=0で消す
		if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
		ctx.strokeText(text,w/2,h/2);
	}

	return canvas;
}

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

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	ctx.fillRect(0,0,w,h);

	return canvas;
}

● 3D部分をグラデーション塗りにする

グラデーション設定に、グラデーションで塗った「Canvasエレメント」を使用しているのが「ミソ」です。

適当な寸法と色を入力します。1、2番目の色を使用します。指定の direction は y、typeは 2 です。


var pattern=ctx.createPattern(createLineGradBox(100,60,"#FFFFFF","#888888","#FFFFFF","y",2),"repeat");

typeは 3 指定は、3色使用されて、2番目の色が中間のグラデーションになります。

 

 

分解、画像塗りTEXT

▲[ 目次 ]

 

TEXTを分解して再度組治したもので、文字の間隔を調整できる。これもSafariでの不具合を治したので掲載する。
「デモ」では、Title表示に使用している。

欠点としては、塗りをする場合にパターンなどの位置あわせが面倒であり、成り行き任せである。
下段にある「表示テキストの大きさのエレメントを作る」で大きさを決めれば少しは位置あわせが可能にはなる。




//幅、高さ、背景色、文字種、サイズ、間隔、文字色、画像使用、ライン色、ライン幅、ライン、パタン画像、ストリング
var logo=createTextLogoCanvasB3 (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)",font_name,"bold 46px",-5,"#FF0000",true,"#FFFFFF",2,true,img,'WELCOME!');
logoImage2.image=new createjs.Bitmap(logo).image;


//分解画像塗りTEXTテスト/Safari補正済
//幅、高さ、背景色、文字種、サイズ、間隔、文字色、画像使用、ライン色、ライン幅、ライン、パタン画像、ストリング
function createTextLogoCanvasB3 (w,h,c,font,fsize,spase,fcolor,image,lcolor,lwidth,line,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;

	ctx.font=font_v;
	ctx.textAlign="left";
	ctx.textBaseline="middle";

	var len=text.length;
	var spc=spase;//-5 0 +2 位の範囲で文字間隔補正狭める/標準0
	var all_tw=ctx.measureText(text).width;//文字全幅
	var tw=Math.floor((w-(all_tw-spc*-1*len))/2);//初期位置中央是正
	//var tw=5;//左指定なら画像パタンが正常

	//画像無し補正
	if (!patternimg) {image=false;}

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

		var t=text.charAt(i);
		var tm=ctx.measureText(t).width;

		//Safari補正用下層テキスト
		if(shadow) {
			ctx.fillStyle=fcolor;
			set_shadow (ctx,"#000000");
			ctx.fillText(t,tw,h/2);
		}

		//画像パタン
		if (image) {
			var pattern=ctx.createPattern(patternimg,"repeat");
			ctx.fillStyle=pattern;
		} else {
			ctx.fillStyle=fcolor;
		}

		//Text
		if(shadow) {ctx.shadowBlur=0;}
		ctx.fillText(t,tw,h/2);

		//TEXT-LINE
		if(line) {
			ctx.strokeStyle=lcolor;
			ctx.lineWidth=lwidth;
			//上のLINEには陰影を付けない
			if(shadow) {ctx.shadowColor="rgba(0,0,0,0)";}
			ctx.strokeText(t,tw,h/2);
		}

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

テキストを画像で染める

原則、テキストを画像で染める虹色パターンをように作っていますが、画像無しで指定色で染める事も可能です。


● テキストを画像で染める
テキストを画像で染める時は「読み込み完了画像」の result値 を指定します。


var img=画像result値;

● テキストを指定色で染める
画像なしを指定すれば、指定のFont色で染めます。


var img=null;

テキストを虹色に染める

原則、虹色パターンを使用して染めるように作っています。

 

● 虹色パターンの使用

虹色パターンを用意していますのでこれを使用しますが、作りが特殊なためにパターン合わせにコツが要る。
表示状態をみながら、createRainbowBox()の引数、横幅 を調整してください。


//Rainbowパターン挿入例
var img=createRainbowBox(logoBoxWidth/3,logoBoxHeight,"x");

図、左を見れば判りますが、通常の作りでは緑の部分が多すぎるので、濃い緑を加えて修正しています。


● getHSL()形式にする

従来のgetHSL()を利用して染める方法です。こちらは1文字ずつ染める形式で、下記の様に修正する必要が有ります。
この時、画像は使用しない設定に成ります。


var img=null;
--------------------------------------------------------------------

//画像パタン
if (image) {
	var pattern=ctx.createPattern(patternimg,"repeat");
	ctx.fillStyle=pattern;
} else {
	var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
	ctx.fillStyle=rainbowColor;

	//ctx.fillStyle=fcolor;
}

IE9での不具合について

テキストを画像などで染めた場合に、その部材がずれて下のテキスト色が食み出す事が有ります。
この「分解画像塗りTEXT」ではまだ不具合を確認していませんが(出ないと思われる)、しかし、Fontの種類によっては発生する可能性が有ります。(IEは気分で動きますので...)
下記の様に修正すれば、目立たなくなります。


//Safari補正用下層テキスト
if(shadow) {
	ctx.fillStyle="#000000";//IE9
	set_shadow (ctx,"#000000");
	ctx.fillText(t,tw,h/2);
}

 

テキスト塗り用パーツの利用

▲[ 目次 ]

3Dテキストなどとは関係のないことですが....


テキストを塗るために色々の「グラデーション塗りエレメント」「パターン塗りエレメント」等作りますが、他の部材の塗りにも応用出来ます。


● Bitmapで利用

上で利用している、「グラデーション塗りエレメント」LinearGradientBoxを」利用して、グラデーションを表示するには、
下が黒、上が赤の、Y方向のライングラデーション塗りが完成します。



//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
createLineGradBox(w,h,color1,color2,color3,direction,type)

-----------------------------------------------------------------
//canvasの大きさ
var canvasWidth=640;
var canvasHeight=300;
//3番目の色はダミー値で使用していない
var parts=createLineGradBox(canvasWidth,canvasHeight,"#000000","#FF0000","#000000","y",2);
var bitmap=new createjs.Bitmap(parts);
stage.addChild(bitmap);

● Graphicsクラスで利用

「Canvasエレメント」は画像と同等ですので、Graphicsクラス、beginBitmapFill()で直接利用出来ます。



var parts=createLineGradBox(canvasWidth,canvasHeight,"#000000","#FF0000","#000000","y",2);
var backrect=new createjs.Shape();
backrect.graphics.beginBitmapFill(parts).drawRect(0,0,canvasWidth,canvasHeight);
stage.addChild(backrect);

以上の様に簡単ですから、再利用は色々な面で出来ると思います。


 

表示テキストの大きさのエレメントを作る

▲[ 目次 ]

以下は、「前ページ」の記事そのままを掲載する。


表示テキストのCSS条件で、仮にCreateJS「Textクラス」のインスタンスを作り、その寸法を取得する事で可能です。
エレメントより食み出し部分は表示しませんので、陰影などを考慮した大きさにしてエレメントを作ります。

正確な値を取得出来なくなりますので、textAlign textBaseline などは指定しないで下さい。


下図は、大きさを取得後、その大きさで textBaseline middle を設定して表示したサンプルです。

 

利点として、テキスト塗りの画像、パターンなどの位置を合わせ易く成る。


FontをArialにして表示した例ですが、Firefoxが一番ずれますので注意が必要です。但し漢字(Arialのままで)を表示した時はまた違ってきます。textBaseline:middle も一番表示誤差が少ないようです。
一番誤差が大きくなるのは、「ゴシック」等指定した場合ですので、Arialが一番無難なFont指定と思います。


● getMeasuredWidth Heightで計算して取得


//TEXTの大きさ計算1
var textData=getTextWH(font_name,"bold 46px","POPS WEB KOUBOU");
var logo=createTextOutlineLogo (textData.width,textData.height,............);

//TEXTの大きさGET
function getTextWH(font,fsize,string) {
	var font_v=fsize +" "+ font;
	var text=new createjs.Text(string,font_v);
	var w=text.getMeasuredWidth();
	var h=text.getMeasuredHeight();
	var textData={width:w,height:h};
	return textData;
}

● getBounds()で計算して取得


//TEXTの大きさ計算2
var bounds=getTextWH(font_name,"bold 46px","POPS WEB KOUBOU");
var logo=createTextOutlineLogo (bounds.width,bounds.height,.............);

//TEXTの大きさbounds
function getTextWH(font,fsize,string) {
	var font_v=fsize +" "+ font;
	var text=new createjs.Text(string,font_v);
	var bounds=text.getBounds();
	return bounds;
}

使用画像

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


▲[ 目次 ]


 

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


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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]