POPSブログ

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

282

  Category:  javascript2014/03/03 pops 

CreateJS Textクラスでの「文字の装飾」は難しい。よって新たな、CanvasエレメントにHTML5 Canvas仕様で描画したものは「装飾」等が仕易く且つ画像同様に扱えるので、Bitmapクラスで表示する事により「文字の装飾」を行なう試みである。
easeljs-0.7 でのテストです。

 

CreateJS Canvasテキスト 表示テスト


1. まだ、CreateJSでは文字を表示できる程度の機能で、「文字の装飾」は困難である。
2. 反面、HTML5 Canvas仕様では、ある程度「文字の装飾」が可能である。
3. 描画した、Canvasエレメントは画像同様であるためにCreateJS Bitmapクラスで表示できる。
(色々な他の処理をしても画像と同じで問題はない)
4. Web Fontを利用すれば、モット多様性のあるデザインにも出来るでしょう。


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


 

DEMO


CreateJS Canvasテキスト テスト、(createJS067.js)

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



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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


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

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

このデモでは、preloadjs-0.4.0.min.js 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

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


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

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

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

//文字BOXの大きさ
var logoBoxWidth=600;
var logoBoxHeight=60;
var titleBoxWidth=200;
var titleBoxHeight=30;
var textBoxWidth=400;
var textBoxHeight=60;

//説明TEXT
var textUse=true;

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

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

//画像 Bitmapインスタンス
var welcomeImage,logoImage,titleImage,textImage;
//説明TEXTインスタンス
var viewtext;

//Text画像保存容器
var titleArr=[];
var textArr=[];

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

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

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

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

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

	//welcome画像層画像表示
	//画像層確保/Firefox対策
	welcomeImage=new createjs.Bitmap('/main/images/flower01.jpg');
	stage.addChild(welcomeImage);

	//画像埋め込みText
	textContainer=new createjs.Container();
	textImage=new createjs.Bitmap();
	textImage.x=(canvasWidth-textBoxWidth)/2;
	textImage.y=180;
	textContainer.addChild(textImage);
	stage.addChild(textContainer);

	//画像埋め込みTitle
	titleContainer=new createjs.Container();
	titleImage=new createjs.Bitmap();
	titleImage.x=(canvasWidth-titleBoxWidth)/2;
	titleImage.y=120;
	titleContainer.addChild(titleImage);
	stage.addChild(titleContainer);

	//画像埋め込みLOGO
	logoContainer=new createjs.Container();
	logoImage=new createjs.Bitmap();
	logoImage.x=(canvasWidth-logoBoxWidth)/2;
	logoImage.y=25;
	logoContainer.addChild(logoImage);
	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);

	//Textをセットするに進む
	set_textData();

}

//Textをセットする
function set_textData() {

	//TITLE-Text
	//TextData/TEXT付きcanvasを作る
	//幅、高さ、背景色、文字種、サイズ、文字色、陰影、ストリング
	titleArr[0]=createTextCanvasB (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF1493",true,'WELCOME');//ベタ陰影true
	titleArr[1]=createTextCanvasB (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF7F50",false,'Welcome2');//ベタ陰影false
	//幅、高さ、背景色、文字種、サイズ、文字色、虹色、ストリング
	titleArr[2]=createTextCanvasB3 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF0000",true,'WELCOME3');//虹色true
	titleArr[3]=createTextCanvasB3 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#C71585",false,'WELCOME4');//指定色false
	//幅、高さ、色、文字種、サイズ、文字色、陰影、ストリング
	titleArr[4]=createTextCanvasB2 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#00CED1",false,'WELCOME5');//アウトライン
	titleArr[5]=createTextCanvasB2 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FFD700",true,'WELCOME6');//アウトライン
	//幅、高さ、色、文字種、サイズ、文字色1、文字色2、陰影、ストリング
	titleArr[6]=createTextCanvasB4 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#7CFC00","#000000",false,'WELCOME7');//グラデTEXT
	titleArr[7]=createTextCanvasB4 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FFFFFF","#DC143C",true,'WELCOME8');//グラデTEXT

	//簡易改行複数Text
	//幅、高さ、内部色、文字種、サイズ、文字色、ライン色、ライン、陰影、ストリング
	//TextData/TEXT付きcanvasを作る
	textArr[0]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","10px","#FFFFFF","#FFFFFF",true,true,"CreateJS Textクラスでの「文字の装飾」は難しい。¥nよって新たな、CanvasエレメントにHTML5 Canvas仕様で描画したものは画像同様に扱えるので、¥nBitmapクラスで表示する事により「文字の装飾」を行なう試みである。");
	textArr[1]=createMultipleTextB (textBoxWidth,textBoxHeight,"#FFA500","Arial","bold 15px","#FFFFFF","#FFFFFF",false,false,"複数テキスト表示用、改行したように¥n見せることが出来ますが¥n単に表示が可能な程度だ");
	textArr[2]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","13px","#FFFFFF","#000000",false,true,"Canvasエレメントにテキストを描画してを表示します。。¥n複数のテキストを表示は出来ますが、自動で改行は出来ませんので¥n単に表示が可能な程度だ。");
	textArr[3]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","12px","#FFFF00","#FFFFFF",true,true,"表示状況を確認しながら文字の大きさなどで調整します。¥nそんな程度で調整など結構面倒になりますし、¥n余り実用的では有りません。..............");
	textArr[4]=createMultipleTextB (textBoxWidth,textBoxHeight,"#000000","Arial","12px","#FFFFFF","#FF0000",true,false,"CreateJSのTextクラスを使用していません。キャンバスに文字を並べていますので¥n多少の位置調整など可能になります。¥nブラウザにより見え方が違う場合が有ります。");
	textArr[5]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0.5)","Arial","12px","#FFFFFF","#000000",true,true,"Canvasエレメントにテキストを描画してを表示します。¥n改行したように見せることが出来ますが¥n単に表示が可能な程度だ。¥n表示状況を確認しながら文字の大きさなどで調整します。");
	textArr[6]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","bold 13px","#FFFFFF","#FFFFFF",true,true,"複数テキスト表示用、改行したように¥n見せることが出来ますが¥n単に表示が可能な程度だ");
	textArr[7]=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0.5)","Arial","bold 12px","#FFFFFF","#FFFFFF",false,false,"複数テキスト表示用、改行したように¥n見せることが出来ますが¥n単に表示が可能な程度だ");

	//表示に進む
	draw();

}

//DRAW
function draw() {

	//Logo
	//簡易Logo-Loader
	var img=new Image();
	img.onload=function() {
		//Bitmap流し込みTEXT
		//LOGO-TEXT付きcanvasを作る
		//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
		var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",false,true,img,'POPS WEB KOUBOU');
		logoImage.image=new createjs.Bitmap(logo).image;
	}
	//error
	img.onerror=function() {
		//代替画像チップ
		var chip=createPatternCanvas(20,logoBoxHeight,"#6496ED","#FFFFFF");
		//幅、高さ、色、文字種、サイズ、文字色、陰影、画像、ストリング
		//var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",true,true,null,'POPS WEB KOUBOU');
		var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",true,true,chip,'POPS WEB KOUBOU');
		logoImage.image=new createjs.Bitmap(logo).image;
	}
	//640x100画像
	img.src="/main/images/textback02.jpg";

	//表示する番号
	var title_no=0;
	var text_no=0;

	//遅延
	setTimeout(function() {

		//Title
		titleImage.image=new createjs.Bitmap(titleArr[title_no]).image;

		//Text
		textImage.image=new createjs.Bitmap(textArr[text_no]).image;

	},2000);

}

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

//VIEWTEXT
function set_text(t) {

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

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

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

	var font_v=fsize +" "+ font;

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

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

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

	return canvas;
}

//------------------------------------------------------
//TEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、陰影、ストリング
function createTextCanvasB (w,h,c,font,fsize,fcolor,shadow,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.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

//アウトラインTEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、陰影、ストリング
function createTextCanvasB2 (w,h,c,font,fsize,fcolor,shadow,text) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.strokeStyle=c;
	//アウトライン
	ctx.strokeRect(0,0,w,h);

	var font_v=fsize +" "+ font;

	ctx.strokeStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	//文字アウトライン
	ctx.strokeText(text,w/2,h/2);

	return canvas;
}

//虹色TEXT付きcanvasを作る3
//幅、高さ、色、文字種、サイズ、文字色、虹色、ストリング
function createTextCanvasB3 (w,h,c,font,fsize,fcolor,rainbow,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=-5;//-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;//左指定
	
	var rainbowColor;//虹色
	for(var i=0;i < len;i++) {

		var t=text.charAt(i);
		var tm=ctx.measureText(t).width;
		//虹色
		if (rainbow) {
			rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		} else {
			ctx.fillStyle=fcolor;
		}

		//Textに陰影
		set_shadow (ctx,"#000000");

		ctx.fillText(t,tw,h/2);

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

//グラデーションTEXT付きcanvasを作る4
//幅、高さ、色、文字種、サイズ、文字色1、文字色2、陰影、ストリング
function createTextCanvasB4 (w,h,c,font,fsize,fcolor1,fcolor2,shadow,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 gradient=ctx.createLinearGradient(0,0,0,h);
	//上
	//16進カラーをrgbの形式に変換1
	var rgbArr=toRgb(fcolor1);
	//旨くしないとエラーになるGraphics.getRGB利用した面倒
	gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//OK
	//下
	//16進カラーをrgbの形式に変換2
	var rgbArr=toRgb(fcolor2);
	gradient.addColorStop(1.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//OK
	ctx.fillStyle=gradient;

	var font_v=fsize +" "+ font;

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

	//Textに陰影
	if (shadow) {set_shadow (ctx,"#555555");}
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

//------------------------------------------------------
//TEXT付きcanvasを作る/簡易改行用
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、ストリング
function createMultipleTextB (w,h,c,font,fsize,fcolor,lcolor,line,shadow,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);

	//ライン
	if(line) {
	ctx.strokeStyle=lcolor;
		//アウトライン枠
		ctx.strokeRect(0,0,w,h);
	}

	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	//ctx.textAlign="left";;
	ctx.textBaseline="top";

	var textList=text.split('¥n');
	var lineHeight=ctx.measureText("国").width;
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#555555");}
	textList.forEach(function(text,i){
    		ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  	});

	return canvas;
}
//------------------------------------------------------
function createPatternCanvas (w,h,c,c2) {

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

	ctx.beginPath();
	ctx.fillStyle=c2;
	ctx.fillRect(0,0,10,h);

	ctx.beginPath();
	ctx.moveTo(5,0);
	ctx.lineTo(10,0);
	ctx.lineTo(5,h);
	ctx.lineTo(0,h);
	ctx.closePath();

	ctx.fillStyle=c;
	ctx.fill();

	return canvas;
}

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

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

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

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

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

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

//START
init();

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


参考、デモで使用のLogo設定


//LOGO-TEXT
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
logoArr[0]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",false,true,'POPS WEB KOUBOU');
logoArr[1]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",false,false,'POPS WEB KOUBOU');
logoArr[2]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",true,true,'POPS WEB KOUBOU');
logoArr[3]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",true,false,'POPS WEB KOUBOU');
logoArr[4]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Impact","bold 56px","#6496ED","#FFFFFF",false,true,'POPS WEB KOUBOU');
logoArr[5]=createTextLogoSum (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Impact","bold 56px","#6496ED","#FFFFFF",false,false,'POPS WEB KOUBOU');

CSS

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


/*日本語createJS067.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仕様での記述方法を覚えなければ成りませんがさほど大変では有りません。
テキストで在っても画像としての表示ですが、多用な「文字デザイン」の可能な事が今重要です。(この辺がミソ)


1. 画像としての表示なので、拡大すればボケる欠点がある。
2. アニメーションするには文字個別には操作できない、画像全体を扱うので在る程度の制約はある。
3. Canvas仕様が発展すれば、将来にはモット多彩に表現可能になるでしょう。
4. どちらにしろ、アイデア次第だ!。
5. 一応 easeljs-0.7.1でも可動します。


[ 簡単な説明の目次 ]



Canvasエレメントの表示

▲[ 目次 ]

CreateJS Bitmapクラスでは、画像の他にCanvasエレメント等を取り込み表示出来ます。
CanvasエレメントはCanvas処理の内部的にはPNG画像と同様のものですから、CreateJS Loaderクラスで得られたresult値、またはjavascript Image()クラスで得られたオブジェクト同様に、Bitmap()に取り込み表示できる事になる。


CreateJS 0.7 マニュアルでは、HTMLCanvasElement の表示が出来る事が記載されている。


Bitmap Class
Bitmap ( imageOrUri )

Parameters:
imageOrUri Image | HTMLCanvasElement | HTMLVideoElement | String

よって...


var canvasImage=new createjs.Bitmap(Canvasエレメント);
stage.addChild(canvasImage);

と、記述する事により、画像の如きステージに表示できる。


例、赤色、200x100の大きさの四角画像(Canvasエレメント)を作る。

注意、createCanvasBox()関数の中は「HTML5 Canvas仕様」で書いている。


var canvasImage=new createjs.Bitmap(createCanvasBox(200,100,"#FF0000"));
stage.addChild(canvasImage);

//BOX
function createCanvasBox(w,h,c) {
	
	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);
	
	return canvas;
}

画像同等に作った、Canvasエレメントは Graphicsクラス でも使える。

特に、beginBitmapFill()は画像がないとエラーを引き起こしやすいので重宝と思う。


...beginBitmapFill(Canvasエレメント,repetition,matrix)...

このように、色々なものを描画して利用することが可能になります。ここでは便宜上このようにして作った「Canvasエレメント」を当方では「Canvas要素」と呼ぶことにします。


一行テキスト、Canvas要素を作る

▲[ 目次 ]

 

一行テキスト、標準形

▲[ 目次 ]

「デモ」での処理関数では、上図の様な構造になりますので、テキストの大きさが必ずしも同じとは限りませんので、
原則、透明 rgba(0,0,0,0) を指定します。テキスト背景色を設定する場合は16進の色(#000000など)を指定します。
「陰影」は、true false で指定出来ます。(作り方次第ですが...)


先に、エレメントの大きさを指定していますので、エレメントとテキストの関係などは上図の様になります。

表示状態を確認しながら、エレメントの大きさ等を調整します。


1. エレメント(ctx)の大きさは、中のテキストエレメントの大きさと異なる。
2. エレメントより文字が大きいと食み出し分は描画されません。
3. グラフイック処理の文字でも基準になるのは外側のエレメントになります。
4. 外側のエレメントを中のテキストエレメントと同じにするには工夫が必要?
5. 使用目的が限定されて要る訳では有りません。Fontサイズなど変えれば良い訳です。
6. 改行文字を入れても改行はしません。(1行限定)
7. 図、「デモ」では「英数字」ですが、勿論「日本語」もそのままで表示出来ます。
8. ここでは比較的小さなFontサイズにしていますが、Fontサイズは自由ですし、また大きなLogoとしても使用は可能です。(特段区別のあるものではない)


● 表示例、背景は透過、陰影付き

指定したエレメントの大きさのX方向中央に文字が表示されます。(Y方向中央とは限らない)
殆んど、下記のような形で作っていますが決め方次第では如何様にも成ります...。


var title=createTextCanvasB (横の大きさ,縦の大きさ,"rgba(0,0,0,0)","Arial","bold 32px","#FF1493",true,'WELCOME');
stage.addChild(title);

処理の明細


var titleBoxWidth=200;
var titleBoxHeight=30;

----------------------------------------------------------------
//幅、高さ、背景色、文字種、サイズ、文字色、陰影、ストリング
//ベタ陰影あり
var title=createTextCanvasB (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF1493",true,'WELCOME');
//ベタ陰影なし
var title=createTextCanvasB (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF7F50",false,'WELCOME');

----------------------------------------------------------------
//TEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、陰影、ストリング
function createTextCanvasB (w,h,c,font,fsize,fcolor,shadow,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.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

● 陰影は16進カラーで指定出来る様にした。(RGB指定は面倒である)

注意「HTML5 Canvas仕様」では「陰影」はテキストにのみ処理出来る。


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

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

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

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

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

関数名などは何でも良いし改造は自由、色々と工夫しましょう。toRgb()関数はダサイ何とかならんもんでしょうか?


● Logoとして使用する

Logoとして使用する場合は比較的大きなサイズにすることが多いでしょう。下記の「虹色着色形」などでも同様Logoとして使用しても良い。
指定したエレメントの大きさのX方向中央に文字が表示されます。(Y方向中央とは限らない)


var logo=createTextCanvasB (横の大きさ,縦の大きさ,"rgba(0,0,0,0)","Arial","bold 32px","#FF1493",true,'WELCOME');
stage.addChild(title);

一行テキスト、虹色着色形

▲[ 目次 ]

文字色を個別に虹色に着色または指定色でも可能です。特徴としては文字を分解して再度組み立てているために、文字間隔を指定できます。但し重なりの順序は変えられません。

1. 虹色は、true、指定色は、false
2. 文字間隔は、spc を調整ください。 0 は調整しない標準です。
3. 中央に配置なるように調整しています。(簡易計算のため1-2ドットの誤差有り、見た目判らない)
4. 加工すればモット色々と出来る可能性があります。(万能ミソか!)
5. 出来上がりは、1枚の画像同然ですから個別にtweenなどは出来ません。


設定


//幅、高さ、背景色、文字種、サイズ、文字色、虹色、ストリング
//虹色true
var title=createTextCanvasB3 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#FF0000",true,'WELCOME');
//指定色false
var title=createTextCanvasB3 (titleBoxWidth,titleBoxHeight,"rgba(0,0,0,0)","Arial","bold 32px","#C71585",false,'WELCOME');

処理

この文字の分解再構成は、結構使い道があると思います。


//虹色TEXT付きcanvasを作る3
//幅、高さ、色、文字種、サイズ、文字色、虹色、ストリング
function createTextCanvasB3 (w,h,c,font,fsize,fcolor,rainbow,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=-5;//-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;//左指定
	
	var rainbowColor;//虹色
	for(var i=0;i < len;i++) {

		var t=text.charAt(i);
		var tm=ctx.measureText(t).width;
		//虹色
		if (rainbow) {
			rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		} else {
			ctx.fillStyle=fcolor;
		}

		//Textに陰影
		set_shadow (ctx,"#000000");

		ctx.fillText(t,tw,h/2);

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

一行テキスト、アウトライン、グラデ装飾

▲[ 目次 ]

ここでの説明は簡単省略します。実際の処理関数をみれば一目両全です。

改造すれば、幾らでも色々な「デザイン文字」を作れると思います。


1. サイズの違う文字を重ねる。
2. 位置をずらして複数文字を重ねる。
3. グラデーションの方向などを変える。
4. 書換え修正などは自由になります。好きなデザインにして下さい。


● アウトラインTEXTの例

テキストのアウトラインを描画します。但し、ブラウザによっては少々描画が乱れる場合がありますがFontの問題ですので修正は出来ません。余り気づかないと思います。
アウトラインの幅(太さ)は lineWidth で制御できます。Fontの内側に向かって太くなりますが、文字の小さい場合は大きい値の設定は控えます。
反対に、陰影はFontの外側に向かって太くなります。


線幅 1、省略しても 1 です。


ctx.lineWidth=1;


//アウトラインTEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、陰影、ストリング
function createTextCanvasB2 (w,h,c,font,fsize,fcolor,shadow,text) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.strokeStyle=c;
	//アウトライン
	ctx.strokeRect(0,0,w,h);

	var font_v=fsize +" "+ font;

	ctx.strokeStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#000000");}
	//文字アウトライン
	ctx.strokeText(text,w/2,h/2);

	return canvas;
}

● グラデーション装飾の例

16進カラーをRGB形式に変換して作っています。



//グラデーションTEXT付きcanvasを作る4
//幅、高さ、色、文字種、サイズ、文字色1、文字色2、陰影、ストリング
function createTextCanvasB4 (w,h,c,font,fsize,fcolor1,fcolor2,shadow,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 gradient=ctx.createLinearGradient(0,0,0,h);
	//上
	//16進カラーをrgbの形式に変換1
	var rgbArr=toRgb(fcolor1);
	//旨くしないとエラーになるGraphics.getRGB利用した面倒
	gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//OK
	//下
	//16進カラーをrgbの形式に変換2
	var rgbArr=toRgb(fcolor2);
	gradient.addColorStop(1.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//OK
	ctx.fillStyle=gradient;

	var font_v=fsize +" "+ font;

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

	//Textに陰影
	if (shadow) {set_shadow (ctx,"#555555");}
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

角丸RoundRectを描く

▲[ 目次 ]

角丸形をCanvasエレメントで描く場合は、quadraticCurveTo()を使用します。
arcTo()でも描けますが、Operaで変形してしまいますので、quadraticCurveTo()を使用している訳です。


下記にその例のみ掲示します。実際にこのJSでは使用していません。角丸の半径は中で設定しています。使用する際には好みの形に改造すると宜しい。


設定


//幅、高さ、色、文字種、サイズ、文字色、ストリング
//黒半透明
var title=createTextCanvasRoundrect (幅,高さ,"rgba(0,0,0,0.5)","Arial","bold 32px","#FFFFFF",'WELCOME');
//白ベタ色
var title=createTextCanvasRoundrect (幅,高さ,"#FFFFFF","Arial","bold 32px","#32CD32",'WELCOME');

処理


//TEXT付き角丸RoundRectCanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvasRoundrect (w,h,c,font,fsize,fcolor,text) {

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

	var x=0;
	var y=0;
	var r=5;
	//RoundRect/Opera OK
	ctx.beginPath();
	ctx.moveTo(x+r,y);
	ctx.lineTo(x+w-r,y);
	ctx.quadraticCurveTo(x+w,y,x+w,y+r);
	ctx.lineTo(x+w,y+h-r);
	ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
	ctx.lineTo(x+r,y+h);
	ctx.quadraticCurveTo(x,y+h,x,y+h-r);
	ctx.lineTo(x,y+r);
	ctx.quadraticCurveTo(x,y,x+r,y);
	ctx.closePath();
	ctx.fill();

	//Textに陰影
	set_shadow (ctx,"#000000");

	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	ctx.fillText(text,w/2,h/2);

	return canvas;
}

改行テキストの設定

▲[ 目次 ]

現在、Canvasでは1行テキストのみで、まだ複数行(自動改行)のテキストには対応していません。複数行のテキストを表示するには工夫が必要です。


1. CreateJS Textクラスでのテキスト表示では、「改行文字(¥n)」を使用できますが、デザインするにはまだ不向きです。(使用しませんので、説明など省略します)
2. 上記説明の、Createエレメントに描画する方法が現在デザイン性に優れていますので、こちらを使用します。
3. この例では簡単に文章のみ記述する程度で、読み易くするため陰影を設定出来る様にしました。
4. 読み易さなどは、文字色、背景色などに左右されますので工夫下さい。


複数行の方法は、下記記事を参考にした。

【参照】jsdo.it記事: HTML5 Canvas で縦書き


改行する箇所に「改行文字(¥n)」を挿入下さい。ブラウザにより表示が異なりますので確認の必要が有ります。

実際には「改行文字」で改行はしませんので、それを目安に改行したかの様に処理しています。
ブラウザにより間隔が微妙に違う場合がありますが、修正は出来ません。


若干「行間」が出来れば良いだけである。縦方向を取得すると結構ブラウザで差があるので、横を取得している。
かなり適当ですので、問題があれば修正ください。


原則、透明 rgba(0,0,0,0) を指定します。テキスト背景色を設定する場合は16進の色(#000000など)を指定します。
陰影は、true false で指定出来ます。外側のライン枠の色、表示指定も可能です。


● 表示例

単に、表示できる程度のものです。文字は左揃いになります。


var multitext=createMultipleTextB (横の大きさ,縦の大きさ,"rgba(0,0,0,0)",.............);
stage.addChild(multitext);

処理の明細


var textBoxWidth=400;
var textBoxHeight=60;

----------------------------------------------------------------
//幅、高さ、枠色、文字種、サイズ、文字色、ライン色、ライン、陰影、ストリング
var multitext=createMultipleTextB (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","10px","#FFFFFF","#FF0000",true,true,"テキストと改行文字の組み合わせ");

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

function createMultipleTextB (w,h,c,font,fsize,fcolor,lcolor,line,shadow,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);

	//ライン
	if(line) {
	ctx.strokeStyle=lcolor;
		//アウトライン枠
		ctx.strokeRect(0,0,w,h);
	}

	var font_v=fsize +" "+ font;

	ctx.fillStyle=fcolor;
	ctx.font=font_v;
	//ctx.textAlign="left";;
	ctx.textBaseline="top";

	var textList=text.split('\n');
	var lineHeight=ctx.measureText("国").width;
	//Textに陰影
	if (shadow) {set_shadow (ctx,"#555555");}
	textList.forEach(function(text,i){
    		ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  	});

	return canvas;
}

改造自由。目的に合わせて補正してください。


テキストの中に画像を描写する

▲[ 目次 ]

画像をFontでマスク出来れば良いのですが、Font構成のパスをgraphicsで描画できればマスクを作れる理屈になる。現在Font構成のパスが取得出来ません。(javascriptで無いものか探したが見つからない...)
Html5 Canvas処理命令は準備されていますから、将来取得できる思いますが、現時点で処理するにはテキスト(Font)に画像を流し込めますからこの手法でやりたいと思います。


Font も、パターン適用 createPattern() すれば画像を中に描画できる


HTML5 Canvas仕様で「パス図形」にパターン適用すれば画像を壁紙状に並べることが出来ますので、テキスト(Font)で試したら可能でした。効果は「デモ」を参照下さい。


● 画像を用意する

画像は何でも結構です。原則外側の、Canvasエレメントの大きさ位のものを用意します。大きな画像をトリミングする事も可能です。督促状、逮捕状、不渡り手形写し、ビットコイン画像など情緒豊かでトレンドです!
[適当画像] textback02.jpg

 

1. 使用する画像は必ず、ロード済みである事。(ロード済みでないと、ブラウザ特有の画像無しのマークが展開されて見栄えが良くない、Chromeでは真っ黒になる)
2. Canvas要素(Canvasエレメント)も画像替わりの材料になりますのでこれで処理しても良い。
3.「デモ」では大きな画像を使用していますが、小さな壁紙でも問題は有りません。
4. パターン適用してグラフイックを描く要領で出来る。(リピートは有効にした方が良いかも、「repeat」)
5. Font はなるべく太いほうが良いと思う。(反対に細いFontでも其れなりの効果は有ります...)
6. WebFontを利用するのも選択肢の一つです。


画像埋め込みの書式


var ctx=canvas.getContext("2d");

var pattern=ctx.createPattern(画像result値,"repeat");
ctx.fillStyle=pattern;
ctx.fillText(テキスト,横幅,高さ);

● 表示例

画像 result値 は必ずロード済みの事。


1. 画像を使用しない場合、画像result値は null を設定。(指定色で染めます)
(注意、画像位置は、テキストではなく外側のCanvasエレメントが基準になります)
2. 背景色は原則、rgba(0,0,0,0)、文字のみ表示するようにしています。
3. 文字色、rgba(0,0,0,0)、は透過の場合、通常の色指定は16進カラー。(画像を使用しない場合)
4. Font外側にラインを描画できます。ライン true で有効、使用されるのはライン色です。
5. 色々な形式で表示出来るように作った。


この例では画像優先、なければ、文字指定色で塗られる様にしている。


//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影、パタン画像、ストリング
var logo=createTextLogoCanvas (横の大きさ,縦の大きさ,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",false,true,画像result値,'テキスト');
stage.addChild(logo);

● 実際の処理


var logo=createTextLogoCanvas (logoBoxWidth,logoBoxHeight,"rgba(0,0,0,0)","Arial","bold 50px","#6496ED","#FFFFFF",false,true,img2,'POPS WEB KOUBOU');
空のBitmap()であるlogoImageに流し込んでいる
logoImage.image=new createjs.Bitmap(logo).image;

この辺は設計構造で臨機応変に対応する。


処理

パターン画像である、patternimg を判定して、画像がない場合は指定色で染めている。
また、Font外側にラインを描画出来る様にもしている。この例ではライン幅1。



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

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

	var font_v=fsize +" "+ font;

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

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

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

	return canvas;
}

画像取得失敗の処理

画像取得に失敗した場合に、設定の色を使用して染め上げるようにして有りますが、(簡単です)
その他、代替画像(Canvas要素)を作って表示する事も可能です。(大変面倒です)
下記例では、「代替画像チップ」を作り画像替わりに使用しています。パターン模様などは各自作る必要が有ります。


1. 画像取得に失敗のエラー処理をする。
2. 画像替わりのものを作り代入する。
3. 面倒なら、簡単に色で染めて知らんふりする。(最も利口な方法だ、オススメ!)


● new Image()での処理例

画像を取得出来ればそれを使用、失敗すれば「代替画像」を作り代入。


//DRAW
function draw() {

	//Logo
	//簡易Logo-Loader
	var img=new Image();
	img.onload=function() {
		//Bitmap流し込みTEXT
		var logo=createTextLogoCanvas (略す......);
		logoImage.image=new createjs.Bitmap(logo).image;
	}
	//error
	img.onerror=function() {
		//代替画像チップ
		var chip=createPatternCanvas(20,logoBoxHeight,"#6496ED","#FFFFFF");
		var logo=createTextLogoCanvas (略す......);
		logoImage.image=new createjs.Bitmap(logo).image;
	}
	//640x100画像
	img.src="/main/images/textback02.jpg";

	略す

}

----------------------------------------------------------------
代替用の斜めライン描画のチップを作っています

function createPatternCanvas (w,h,c,c2) {

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

	ctx.beginPath();
	ctx.fillStyle=c2;
	ctx.fillRect(0,0,10,h);

	ctx.beginPath();
	ctx.moveTo(5,0);
	ctx.lineTo(10,0);
	ctx.lineTo(5,h);
	ctx.lineTo(0,h);
	ctx.closePath();

	ctx.fillStyle=c;
	ctx.fill();

	return canvas;
}

アア、面倒だ。作業量が増えますのでこの辺は、個人の判断になります。


● CreateJS LoadQueue()での処理

読み込み失敗の場合に、上で説明の様に代替用の斜めライン描画のチップなどを作り使用するように処理すれば良いが、大変な作業になります。
代替用が無ければ、指定色で染まるだけです。


事前にEventListenerなど設定しておく。エラー時、上記説明の「代替画像チップ」を作り保存する。


//保存容器
var assets=[];
//errorEventListener設定
loader.addEventListener("error",errorhandler);

-----------------------------------------------------------------------
//error処理
function errorhandler (event) {
	//代替画像チップ
	var chip=createPatternCanvas(20,高さ,"#6496ED","#FFFFFF");
	assets.push(chip);
}

保存された「代替画像チップ」は画像と同じだから、処理し易い利点がある。


エラー時、2種の「代替画像チップ」を作る処理を記述したが、大変面倒です。
よって、ワタクシとて「エラー処理」なんざする気無しです。暇な人の退屈しのぎには成るでしょう。


その他の注意点など

▲[ 目次 ]


Text陰影の注意点

Text陰影を付ける場合は、テキストを描画する fillText() などの前に「陰影処理」を実行してください。
設定位置が悪いと、陰影処理はなされません。


Safariで陰影処理がされない不具合が発生します。但し新しいMAC用のSafariでは未確認です。対象方は次ぎの項を参照下さい。



//Textに陰影
if (shadow) {set_shadow (ctx,"#000000");}//OK
ctx.fillText(text,w/2,h/2);

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

これは順序が違い、ダメ
ctx.fillText(text,w/2,h/2);
if (shadow) {set_shadow (ctx,"#000000");}//ダメ

「HTML5 Canvas仕様」は戸惑う場合がある。中身は個人で自由に変更してください。


Safariで陰影処理がされない不具合

▲[ 目次 ]

Canvass仕様で直接テキスト等を描画の際、Safari陰影処理(shadow)でグラデーション部分に陰影が付かない不具合が有ります。(テキストに画像挿入もこれに該当する)
当方、Windows環境なので古いSafari(WIN)のみでしか確認できません。よって、最新のSafariでは不明です。


1. 陰影が付かない場合、Canvas要素の入った、Bitmapインスタンスに対してCreateJS「shadowフィルター」を使用する。(多少陰影処理したくない部分も処理される事もあるが、一応陰影は付く)
2. Safariのシェアは少ないので無視する。(Chromeが伸びているので、シェアは微々たるものです)
3. テキストがグラデーション(又は画像挿入)でなく通常の色なら正常です。
4. Safariの処理が正常に成るまで待つ(当方、最新のSafari(MAC)は未確認です、現在Safari(WIN)のリリースは停止されています)。


● 対処方法1、 2014/03/08追記します。

陰影処理の必要な場合に、
Safariを判定して、Canvas要素の入った「Bitmapインスタンス」にCreateJS「shadowフィルター」する。


Browser判定する
//------------------------------------------------------
//Browser判定
var userAgent = window.navigator.userAgent.toLowerCase();
var safari=false;
if (userAgent.indexOf("safari") > -1) {safari=true;}
//------------------------------------------------------

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

Bitmapインスタンスにshadowフィルター
if(safari) {
	対象のBitmapインスタンス.shadow=shadow;
}

古いSafari(WIN)では一応陰影処理されます。これ以上は現在、当方対処の手立ては有りません。


対処方法2、2014/03/24追記します。

新たに対処方法を考えました。少し記述が面倒になりますがブラウザ判別は不要です。詳細は下記以降の「Canvasエレメント描画」関連記事を参照下さい。
勿論、上記の「対処方法1」でも構わない。

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


CreateJS shadowフィルターの使用

表示するCanvas要素は、Bitmap()に取り込まれていますので、当然、CreateJS「shadowフィルター」を使用できます。但しどのような表示になるかは、Canvas要素の作りによって違いが有るようです。


1. Canvas要素の入った、Bitmapインスタンスに対して「shadowフィルター」を使用する。
2. Canvas要素を作る過程及び、Canvas要素には実行できない。(「HTML5 Canvas仕様」の陰影を使う)
3. Canvasエレメント描画の構造で違いがあるので、陰影効果などは実際に実行しないとわからない。
4. 「shadowフィルター」の色、形などは目的に応じ変えます。



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

Bitmapインスタンス.shadow=shadow;

Canvasエレメントの大きさは最初に指定する

新規に、Canvasエレメントの大きさを決定してから、文字などを描画しますので、Canvasエレメント描画中で、文字列の大きさにCanvasエレメントの寸法を合わせることは困難のようです。(もしかしたら方法はあるか?)

ピッタリにするなら、面倒でも画面表示を確認しながら寸法を決めます。


目的に応じて処理関数を作る

幾らでも、処理関数は作れますので、上記の例、あるいはネット上の他の記述例など参考に作ってください。


Text要素の背景は貧弱です

若し、キレイな「Text要素の背景」が必要な場合は、別途Shape等で作り、該当「Text要素」の下層に表示します。
Canvas要素の中で、作ることも可能ですが、陰影を付けられないなどの使勝手の悪さが有ります。
必要性があれば、個人で作って表示下さい。


拡大、移動などの処理

画像Bitmapインスタンスと同じですので、拡大した場合「ボケ」ます。
移動、FadeIn、FadeOutなど出来ますから、通常のBitmapクラスと同様の扱いをして下さい。


通常のCanvasに関する知識

CreateJSでは、殆んど「Canvasに関する知識」が無くとも構成、動作が可能ですが、細やかな処理をしてゆくには、「Canvasに関する知識」が重要であると認識します。
Canvasに関することは、下記サイトが詳しく解説なされており、大変参考に成ります。


【参考】h2.dion.ne.jp: canvas要素の基本的な使い方まとめ


使用画像

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


▲[ 目次 ]


 

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


当方の関連記事

Canvasエレメント描画のテキストをBitmapクラスで表示する、当方の関連記事です。

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

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

【参照】当方の記事: CreateJS Canvasエレメント描画の3D風テキストを作る

【参照】当方の記事: CreateJS Canvasエレメント描画の TextCircle (サークルテキスト)等を作る


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

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


今日もミソラーメンは旨い!、以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]