POPSブログ

CreateJS Canvasエレメント描画の TextCircle (サークルテキスト)等を作る

286

  Category:  javascript2014/03/23 pops 

CreateJS でCanvasエレメントにHTML5 Canvas仕様で描画したTextCircle (サークルテキスト)等を作り、Bitmapクラスで表示します。Canvasエレメントの色々な使用方法を考えます。
easeljs-0.7 でのテストです。

 

CreateJS Canvasエレメント描画の TextCircle 等を作る 表示テスト


TextCircle、グラデーション処理のMultipleText(改行テキスト)Safari不具合修正済み、RadialGradient表示への応用などを考えてみました。


 

DEMO


CreateJS Canvasエレメント描画の TextCircle 等を作る テスト、(createJS071.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

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


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

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

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

//マルチ文字BOXの大きさ
var textBoxWidth=560;
var textBoxHeight=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;
var textCircleContainer;
var loadingContainer;

//画像 Bitmapインスタンス、未使用もある
var welcomeImage;
var logoImage,logoImage2,logoImage3,logoImage4,logoImage5,logoImage6;
var loadingImage;

//説明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();
	//LinearGradient
	//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
	//var backimg=createLineGradBox (canvasWidth,canvasHeight,"#555555","#FF0000","#555555","xy",3);
	//RadialGradient
	//幅、高さ、色1、色2、タイプ、0中心、4隅1-4
	var backimg=createRadialGradBox (canvasWidth,canvasHeight,"#DB7093","#555555",0);
	//Gradient
	backrect.graphics.beginBitmapFill(backimg).drawRect(0,0,canvasWidth,canvasHeight);
	//普通色
	//backrect.graphics.beginFill("#FFFFFF").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//TEXT画像
	var backtext=new createjs.Bitmap("/main/images/textimg01.png");
	backtext.regX=170;
	backtext.regY=25;
	backtext.x=320;
	backtext.y=100;
	backtext.scaleX=2.5;
	backtext.scaleY=2.5;
	backtext.rotation=-30;
	stage.addChild(backtext);

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

	//textCircle
	textCircleContainer=new createjs.Container();
	//1
	logoImage5=new createjs.Bitmap();
	logoImage5.regX=110;
	logoImage5.regY=110;
	textCircleContainer.addChild(logoImage5);

	//2
	logoImage4=new createjs.Bitmap();
	logoImage4.regX=110;
	logoImage4.regY=110;
	//tick
	logoImage4.tick=function(){
		logoImage4.rotation -=5;
	};
	textCircleContainer.addChild(logoImage4);

	//コンテナ位置
	textCircleContainer.x=110;
	textCircleContainer.y=110;
	stage.addChild(textCircleContainer);

	//addEventListenerを設定
	createjs.Ticker.addEventListener('tick',logoImage4.tick);

	//簡易改行複数Textテスト
	logoImage6=new createjs.Bitmap();
	logoImage6.x=(canvasWidth-textBoxWidth)/2;
	logoImage6.y=230;//
	stage.addChild(logoImage6);

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

	//キャンバス要素loadingImage
	loadingContainer=new createjs.Container();
	//要素幅、高さ、半径、色
	loadingImage=new createjs.Bitmap(createLoadingImage2(40,40,15,"#FF0000"));
	loadingImage.regX=40/2;
	loadingImage.regY=40/2;
	loadingImage.tick=function(){
		loadingImage.rotation +=10;
	};
	loadingContainer.addChild(loadingImage);

	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingImage.tick);
	loadingContainer.x=canvasWidth/2;
	loadingContainer.y=canvasHeight/2;
	stage.addChild(loadingContainer);

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

	//loading Listener削除非表示
	createjs.Ticker.removeEventListener('tick',loadingImage.tick);
	loadingImage.visible=false;


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

	//-----------------0

	//TextCircle
	var radius_v=100;//半径
	var angle_s=0;//開始角度 12時が0誤差あり
	var angle_d=360;//展開角度 全周360
	//展開方向1=左、-1=右
	//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
	//注意、ストリング全周、最後は空白を入れる
	var logo=createTextCircle (220,220,"rgba(0,0,0,0)","Arial","bold 10px","#AAAAAA",radius_v,angle_s,angle_d,-1,"#000000",false,false,"mukasi mukasi arutokoroni ojiisann to obaasannga imasita ojiisannha patinnko ni... ");
	logoImage5.image=new createjs.Bitmap(logo).image;

	//TextCircle
	var radius_v=80;//半径
	var angle_s=0;//開始角度 12時が0誤差あり
	var angle_d=360;//展開角度 全周360
	//展開方向1=左、-1=右
	//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
	//注意、ストリング全周、最後は空白を入れる
	var logo=createTextCircle (220,220,"rgba(0,0,0,0)","Serif","bold 20px","#FF0000",radius_v,angle_s,angle_d,1,"#000000",true,true,"WELCOME TO MY SITE ");
	logoImage4.image=new createjs.Bitmap(logo).image;


/*
	//Create-TextCircle/パタン画像対応
	var img=createLineGradBox(220,55,"#FFFFFF","#888888","#FFFFFF","y",2);
	//var img=null;
	//var img=createPatternCanvas4 (220,55,"#FFD700","#FF0000");
	//展開方向1=左、-1=右
	//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、パタン画像、ストリング
	var logo=createTextCircleB (220,220,"rgba(0,0,0,0)","Impact","bold 30px","#FF0000",radius_v,angle_s,angle_d,1,"#000000",true,false,img,"WELCOME TO MY SITE ");
	logoImage4.image=new createjs.Bitmap(logo).image;
*/

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

	//-----------------4
	//var img=assets[1];
	//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
	var img=createLineGradBox (textBoxWidth,textBoxHeight,"#FF0000","#FFD700","#32CD32","y",3);

	//multitext
	//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影色、陰影、パタン画像、ストリング
	var multitext=createMultipleTextC (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","12px","#FFFFFF","#FFFFFF",true,"#FFFFFF",true,img,"CreateJS Textクラスでの「文字の装飾」は難しい。¥nよって、新たなCanvasエレメントにHTML5 Canvas仕様で描画したものは画像同様に扱えるので、¥nBitmapクラスで表示する事により「文字の装飾」を行なう試みである。¥nSafariグラデーション時陰影不具合補正済。");
	logoImage6.image=new createjs.Bitmap(multitext).image;


}

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

//VIEWTEXT
function set_text(t) {

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

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

//Create-TextCircle/非prototype
//展開方向1=左、-1=右
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
function createTextCircle (w,h,c,font,fsize,fcolor,r,as,ad,k,scolor,shadow,rainbow,text) {

	//TextCircle
	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";

	ctx.fillStyle=fcolor;
	if(!scolor) {scolor="#000000";}
	if(shadow) {set_shadow (ctx,scolor);}

	//ラジアン変換
	var angle_s=as*createjs.Matrix2D.DEG_TO_RAD;//開始角度
	var angle_d=ad*createjs.Matrix2D.DEG_TO_RAD;//展開角

	//描画データ
	var len=text.length;
	ctx.translate(w/2,h/2);
	var k_v=k || 1;//方向
	var nAngle=angle_d/len;
	for (var i=0; i < len; i++){
		ctx.save();
		ctx.rotate(k_v*i*nAngle+angle_s);
		if(rainbow) {
			var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		}
		ctx.fillText(text[i],0,-k_v*r);
		ctx.restore();
	}
	ctx.restore();

	return canvas;

}

//Create-TextCircle/パタン画像対応Safari補正済
//展開方向1=左、-1=右
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、パタン画像、ストリング
function createTextCircleB (w,h,c,font,fsize,fcolor,r,as,ad,k,scolor,shadow,rainbow,patternimg,text) {

	//TextCircle
	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";

	if(!scolor) {scolor="#000000";}
	//パタン画像修正
	if(patternimg){rainbow=false;fcolor=scolor;}

	ctx.fillStyle=fcolor;

	//ラジアン変換
	var angle_s=as*createjs.Matrix2D.DEG_TO_RAD;//開始角度
	var angle_d=ad*createjs.Matrix2D.DEG_TO_RAD;//展開角

	//描画データ
	var len=text.length;
	ctx.translate(w/2,h/2);

	var k_v=k || 1;//方向
	var nAngle=angle_d/len;
	for (var i=0; i < len; i++){
		ctx.save();
		ctx.rotate(k_v*i*nAngle+angle_s);
		if(rainbow) {
			var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		}
		//通常
		if(!patternimg){
			if(shadow) {set_shadow (ctx,scolor);}
			ctx.fillText(text[i],0,-k_v*r);
		}
		//パタン画像
		if(patternimg){
			//下テキスト
			if(shadow) {set_shadow (ctx,scolor);}
			ctx.fillText(text[i],0,-k_v*r);
			var pattern=ctx.createPattern(patternimg,"repeat");
			ctx.fillStyle=pattern;
			if(shadow){ctx.shadowColor="rgba(0,0,0,0)";}
			ctx.fillText(text[i],0,-k_v*r);

		}
		
		ctx.restore();
	}
	ctx.restore();

	return canvas;

}

//---------------------------------------
//Create-TextCircle2/prototype
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
function createTextCircle2 (w,h,c,font,fsize,fcolor,r,as,ad,k,scolor,shadow,rainbow,text) {

	//展開方向1=左、-1=右
	//TextCircle
	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";

	ctx.fillStyle=fcolor;
	if(!scolor) {scolor="#000000";}
	if(shadow) {set_shadow (ctx,scolor);}

	//ラジアン変換
	var angle_s=as*createjs.Matrix2D.DEG_TO_RAD;
	var angle_d=ad*createjs.Matrix2D.DEG_TO_RAD;

	//prototype
	//ストリング、中心位置X Y、半径、開始角度、展開角度(Deployment angle)、展開方向、虹
	//Math.PI/2,Math.PI*2
	ctx.fillTextCircle(text,w/2,h/2,r,angle_s,angle_d,k,rainbow);

	return canvas;

}

//prototype
CanvasRenderingContext2D.prototype.fillTextCircle=function(text,x,y,radius,startRotation,deploymentAngle,k,rainbow){

	var k_v=k || 1;//方向
	//1文字の角度
	var numRadsPerLetter=deploymentAngle/text.length;
	this.save();
	this.translate(x,y);
	this.rotate(startRotation);
	var len=text.length;

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

		this.save();
		this.rotate(i*numRadsPerLetter*k_v);
		if(rainbow) {
			var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			this.fillStyle=rainbowColor;
		}
		this.fillText(text[i],0,-radius*k_v);
		this.restore();
	}
	this.restore();
}

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

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

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

	var font_v=fsize +" "+ font;

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

	//Textに指定色陰影
	if (!scolor) {scolor="#000000";}//陰影補正

	var textList=text.split('¥n');
	var lineHeight=ctx.measureText("国").width;

	//下テキスト
	//Textに陰影Safari補正
	if (shadow) {
		ctx.fillStyle=scolor;
		set_shadow (ctx,scolor);
		textList.forEach(function(text,i){
    			ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  		});
	}

	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)";}
	textList.forEach(function(text,i){

    		ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  	});

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

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

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

//RadialGradientBoxGradient
//幅、高さ、色1、色2、タイプ(0-4)
function createRadialGradBox (w,h,color1,color2,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	//タイプ修正
	if(!type){type=0;}
	if(type > 4){type=0;}

	//RadialGradient
	var px=[w/2,0,w,w,0];
	var py=[h/2,0,0,h,h];
	var x=px[type];
	var y=py[type];
	var r=w*0.5;
	if(type > 0) {r=w;}
	var gradient;
	gradient=ctx.createRadialGradient(x,y,20,x,y,r);

    	gradient.addColorStop(0,color1);
	gradient.addColorStop(1,color2);

	ctx.fillStyle=gradient;
	//FILL
	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;
}

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

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

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

//Canvas画像Loading2/弧状arc
function createLoadingImage2 (w,h,r,color) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;

	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(color);

	var count=12;//分割12-36
	var color_v;
	var alpha_v=1;//最初のalpha値
	var alphaVx=1/count;//alpha変化値
	var start_angle=0;//始点の角度
	var end_angle=0;//終点の角度
	var angle_w=Math.PI*2/count;//弧の角度

	//Context
	var ctx=canvas.getContext("2d");
	//弧状arc描画、右回転用
	for (var i=0; i < count; i++){
		//透明度
		if (count > 0) {alpha_v -=alphaVx;}
		start_angle -=angle_w;
		end_angle=start_angle+angle_w;

		//rgbaのデータ設定
		var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);//変換

		//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);//手書き1
		//var alphaback="rgba(255,0,0,"+ alpha_v +")";//手書き2

		ctx.lineWidth=2;//幅
		ctx.lineCap="butt";//両端形状
		ctx.strokeStyle=alphaback;
		//ライン描画
		ctx.beginPath();//重要
		ctx.arc(w/2,h/2,r,start_angle,end_angle);
		ctx.stroke();
	}

	return canvas;
}

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

//START
init();

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


CSS

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


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


 

[説明図]

画面中央の大きな文字は、Canvasエレメント描画のテキストではなく「陰影付きのPNG画像」である。

 

[ 簡単な説明 目次 ]


 

 

TextCircle (サークルテキスト)

▲[ 目次 ]

Canvasエレメントにテキストを、translate(x,y)、rotate()を使って円周上に配置して行くだけですが、角度がラジアンですから、デグリー値で設定出来るようにしています。個々のテキストがCreateJSのインスタンスでは有りませんので制約はあるが、多少軽いことが特徴です。


サークルテキストには次ぎの記事を参考にしました。

【参考】stackoverflow.comの記事: HTML5 Canvas Circle Text


「サークルテキスト」に関しては下記、当方の記事にもあるが、文字個別に動かせますが結構重いのが難点です。

【参照】当方の記事: CreateJS 「サークルテキスト」アニメーション、レインボー色(虹色)


通常の塗り方式、(推奨)

▲[ 目次 ]

幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング の設定が出来ます。Canvasエレメントの中央位置を中心とした円周上に文字を配置します。

 

● 設定書式の説明


1. 開始角度は0で12時方向に修正しています。
2. 展開角度は原則 360 ですが、自由に出来ます。「開始角度」及び「展開角度」の調整で自由な位置に弧状に配置も可能です。(実際の描画を見ながら調整します)
3. 展開方向は、文字の読みやすさを考慮して、左方向に回転しながら描画するのを 1 とします。
4. 反対方向の描画は -1 とします。
5. 虹色指定、陰影指定が可能です。
6. この「通常の塗り方式」は、Safari不具合修正は行なっていませんので、テキストにグラデーションを塗った場合はSafariで陰影はつきません。
7. 改造、設定変更などは自由です。
8. 一応 easeljs-0.7.1でも可動します。


間隔は等分の角度ですから必ずしもキレイに揃う訳ではありません。また、展開角度も正確には成りませんので調整が必要です。(個々文字の間隔を算出してその間隔に応じた角度で並べる方法もあるが大変面倒になる)


● 例


//TextCircle
var radius_v=80;//半径
var angle_s=0;//開始角度 12時が0誤差あり
var angle_d=360;//展開角度 全周360
//展開方向1=左、-1=右
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
//注意、ストリング全周、最後は空白を入れる
var logo=createTextCircle (220,220,"rgba(0,0,0,0)","Serif","bold 20px","#FF0000",radius_v,angle_s,angle_d,1,"#000000",true,true,"WELCOME TO MY SITE ");

● 展開角度は360はテキスト修正する

展開角度は 360 は「テキストの最後が重なる」ので最後に半角スペースを挿入してください。


//最後が半角スペース
var logo=createTextCircle (........,"WELCOME TO MY SITE ");

● Bitmap()に取り込んで表示します

Canvasエレメント描画ですので、表示にはBitmap()に取り込む必要が有ります。


インスタンス=new createjs.Bitmap(Canvasエレメント);

当方では、先にコンテナ収容の空のBitmap()を配置して階層(重ね順)を確保して、後で中身を入れることが多い。
その場で、textCircleを作りBitmapに挿入しても良い。これらは自由である。


先に空のBitmap()を配置...


空のBitmap()を配置

//textCircle
textCircleContainer=new createjs.Container();
logoImage4=new createjs.Bitmap();
textCircleContainer.addChild(logoImage4);
stage.addChild(textCircleContainer);

-------------------------------------------------------------
textCircleを作りBitmapに挿入

var logo=createTextCircle (...........);
logoImage4.image=new createjs.Bitmap(logo).image;

直ぐにtextCircleを作り処理...


Bitmap()配置と共に部材を作り挿入

//textCircle
textCircleContainer=new createjs.Container();
logoImage4=new createjs.Bitmap(createTextCircle (...........));
textCircleContainer.addChild(logoImage4);
stage.addChild(textCircleContainer);

CreateJSで、文字個別のアニメなどは、CreateJSのインスタンスでは有りませんので困難と思います。Bitmap()全体なら動かしたり回転など可能です。


● 回転させる

Bitmap()を中央補正(regX、regY)して回転させる。コンテナに収容しているので一緒に移動可能である。
Bitmap()個別に回転させても、コンテナを回転させても良い、この辺は自由である。


個々のCircleが、1つのCanvasエレメントで出来ているために「全てをCreateJSで作る」より幾分軽いような気がする。


TextCircleを回転させる


Bitmapの大きさを220x220とする

//textCircle
textCircleContainer=new createjs.Container();
//1
logoImage5=new createjs.Bitmap();
logoImage5.regX=110;
logoImage5.regY=110;
textCircleContainer.addChild(logoImage5);

//2
logoImage4=new createjs.Bitmap();
logoImage4.regX=110;
logoImage4.regY=110;
//tick
logoImage4.tick=function(){
	logoImage4.rotation -=5;
};
textCircleContainer.addChild(logoImage4);

textCircleContainer.x=110;
textCircleContainer.y=110;
stage.addChild(textCircleContainer);

//addEventListenerを設定
createjs.Ticker.addEventListener('tick',logoImage4.tick);

パターン画像対応形、(非推奨)

▲[ 目次 ]

下図は、実際のパターン塗りを実行した場合の状況です。X方向の位置合わせが出来ません。

各文字が最初に配置された時の、Canvasエレメントの塗りを取得しているのがわかる。

 

テキストの textAlign、textBaseline、設定の関係上の理由もあり(原点00に中心が移動する)、画像などの合わせが困難です。どうしても必要な場合を除いてはオススメできません。
fillTextのXは0ですので、X方向の画像などの合わせが出来ない状態にあり、Y方向も移動していますので複雑です。


図では25%の高さのパターン塗りを実行した時に「W」の文字が同化しているのがわかります。この辺を参考に位置合わせをします。(最終的にはイイカゲンに成ります)


1. textAlign:center、textBaseline:middle、設定の関係で画像合わせは困難。
(TEXTの中心が、Canvasエレメントの原点00に移動する)
2. パターン塗りの関数を用いて少々の塗りは可能。読み込み画像は全く合わせる事が出来ない。
3. 問題が出たら、自己解決しかない。悩め!(ここは悩んでも解決しないヨ)
4. 良い方法などあったら考えてください。



var radius_v=80;//半径
var angle_s=0;//開始角度 12時が0誤差あり
var angle_d=360;//展開角度 全周360
var img=createLineGradBox(280,55,"#FFFFFF","#888888","#FFFFFF","y",2);
//var img=null;

//Create-TextCircle/パタン画像対応
//展開方向1=左、-1=右
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、パタン画像、ストリング
var logo=createTextCircleB (220,220,"rgba(0,0,0,0)","Impact","bold 30px","#FF0000",radius_v,angle_s,angle_d,1,"#000000",true,false,img,"WELCOME TO MY SITE ");
logoImage4.image=new createjs.Bitmap(logo).image;

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

//Create-TextCircle/パタン画像対応Safari補正済
//展開方向1=左、-1=右
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、パタン画像、ストリング
function createTextCircleB (w,h,c,font,fsize,fcolor,r,as,ad,k,scolor,shadow,rainbow,patternimg,text) {

	//TextCircle
	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";

	if(!scolor) {scolor="#000000";}
	//パタン画像修正
	if(patternimg){rainbow=false;fcolor=scolor;}

	ctx.fillStyle=fcolor;

	//ラジアン変換
	var angle_s=as*createjs.Matrix2D.DEG_TO_RAD;//開始角度
	var angle_d=ad*createjs.Matrix2D.DEG_TO_RAD;//展開角

	//描画データ
	var len=text.length;
	ctx.translate(w/2,h/2);

	var k_v=k || 1;//方向
	var nAngle=angle_d/len;
	for (var i=0; i < len; i++){
		ctx.save();
		ctx.rotate(k_v*i*nAngle+angle_s);
		if(rainbow) {
			var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			ctx.fillStyle=rainbowColor;
		}
		//通常
		if(!patternimg){
			if(shadow) {set_shadow (ctx,scolor);}
			ctx.fillText(text[i],0,-k_v*r);
		}
		//パタン画像
		if(patternimg){
			//下テキスト
			if(shadow) {set_shadow (ctx,scolor);}
			ctx.fillText(text[i],0,-k_v*r);
			var pattern=ctx.createPattern(patternimg,"repeat");
			ctx.fillStyle=pattern;
			if(shadow){ctx.shadowColor="rgba(0,0,0,0)";}
			ctx.fillText(text[i],0,-k_v*r);

		}
		
		ctx.restore();
	}
	ctx.restore();

	return canvas;

}

参考、他の方式

● CanvasRenderingContext2D.prototype方式

CanvasRenderingContext2Dのprototypeで処理する方法も、上記URLにあったのでそれでの処理は次ぎの様に成る。(Context2DのCanvasRenderingを乗っ取れるのが面白い)
CanvasRenderingContext2D.prototype方式の方も記載しておきます。他のことで利用価値が出そうな気がする。



//Create-TextCircle2/prototype
//幅、高さ、背景色、文字種、サイズ、文字色、半径、開始角度、展開角度、展開方向、陰影色、陰影、虹色、ストリング
function createTextCircle2 (w,h,c,font,fsize,fcolor,r,as,ad,k,scolor,shadow,rainbow,text) {

	//展開方向1=左、-1=右
	//TextCircle
	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";

	ctx.fillStyle=fcolor;
	if(!scolor) {scolor="#000000";}
	if(shadow) {set_shadow (ctx,scolor);}

	//ラジアン変換
	var angle_s=as*createjs.Matrix2D.DEG_TO_RAD;
	var angle_d=ad*createjs.Matrix2D.DEG_TO_RAD;

	//prototype
	//ストリング、中心位置X Y、半径、開始角度、展開角度(Deployment angle)、展開方向、虹
	//Math.PI/2,Math.PI*2
	ctx.fillTextCircle(text,w/2,h/2,r,angle_s,angle_d,k,rainbow);

	return canvas;

}

//prototype
CanvasRenderingContext2D.prototype.fillTextCircle=function(text,x,y,radius,startRotation,deploymentAngle,k,rainbow){

	var k_v=k || 1;//方向
	//1文字の角度
	var numRadsPerLetter=deploymentAngle/text.length;
	this.save();
	this.translate(x,y);
	this.rotate(startRotation);
	var len=text.length;

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

		this.save();
		this.rotate(i*numRadsPerLetter*k_v);
		if(rainbow) {
			var rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
			this.fillStyle=rainbowColor;
		}
		this.fillText(text[i],0,-radius*k_v);
		this.restore();
	}
	this.restore();
}

 

グラデーション処理のMultipleText

▲[ 目次 ]


Canvas仕様のテキストはMultipleTextはまだ対応していませんので改行文字を入れた「MultipleTextもどき」です。

MultipleText(改行方式)は余りグラデーション処理は仕度有りませんが、イキオイで作って見ます。
あくまでも、現時点での応急措置ですので将来は違ってくるでしょう。Chromeで問題がでましたが回避方法などを下記に記述します。


 

陰影があるために、予期せぬことがおき易い。何回か色々なものを作りクセを理解するほかに方法がない。
ChromeでY方向のグラデーション塗りが合わない事が起きたがこれも修正は可能である。


グラデーション塗りのテキストに、Safari不具合のため、陰影がつきません。


1. 親の容器であるBitmapに陰影を付けるとSafariはOKでが、ChromeでNGになる。
2. 陰影を付けるために、テキストを2重に重ねて処理すると、Safari不具合を防げる。
3. ChromeでY方向のグラデーション塗りにすると、図の様にグラデーションが合わない事が起きる。
図の様に、エレメントの横幅を広げると直る。(または改行位置を変える)

(Chromeで収まりきらず文字ポイントを下げているのが原因だが、見た目わからない)
4. グラデーション塗りの形態が違うと(B)、「グラデーションが合わない」状態でもわからない。
5. 何か起きたら、自己解決しかない。悩め!


テキストの折り返しなどが自動で無いために、レイアウトが面倒である。
HTMLの文字を重ねる手もあるが、一番上の層に成るために間に表示出来ない欠点がある。
このような長所、短所など知った上で旨く組み合わせて構成する事が肝要と思う。


● テキスト記述の1例

改行文字を入れてブラウザ確認しながら調整します。単に改行したように見せかけているだけの代物です。


//画像無し
var img=null;

//multitext
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影色、陰影、パタン画像、ストリング
var multitext=createMultipleTextC (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","12px","#FFFFFF","#FFFFFF",true,"#FFFFFF",true,img,"CreateJS Textクラスでの「文字の装飾」は難しい。¥nよって、新たなCanvasエレメントにHTML5 Canvas仕様で描画したものは画像同様に扱えるので、¥nBitmapクラスで表示する事により「文字の装飾」を行なう試みである。¥nSafariグラデーション時陰影不具合補正済。");

テキストを画像で染める

● テキスト記述の1例

テキストを染める画像または、グラデーション塗り等を渡します。
Chromeで塗りがおかしい時は、幅を広げる、または文字サイズを小さくする。


画像の場合
var img=画像result値;

---------------------------------------------------------------------
Canvasエレメントの塗りを取得の場合

//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
var img=createLineGradBox (textBoxWidth,textBoxHeight,"#FF0000","#FFD700","#32CD32","y",3);


//multitext
//幅、高さ、色、文字種、サイズ、文字色、ライン色、ライン、陰影色、陰影、パタン画像、ストリング
var multitext=createMultipleTextC (textBoxWidth,textBoxHeight,"rgba(0,0,0,0)","Arial","12px","#FFFFFF","#FFFFFF",true,"#FFFFFF",true,img,"略す");

テキストが読みに難い場合

テキストが読みにくい場合には陰影を旨く使用するのが原則ですが、それでも「だめ」な場合は、
Canvasエレメントを着色します。通常は透明になっていますので、半透明などにすれば文字が読み易くなります。


createMultipleTextC (幅,高さ,"rgba(0,0,0,0)",........);

黒色、半透明になる、色は自由です
"rgba(0,0,0,0.5)"

 

RadialGradient表示への応用

▲[ 目次 ]


前ページでは、LinearGradient を扱ったが、これは RadialGradient である。どちらを使用するにも好みの問題である。
焦点の位置により5種類を選定できる。(RadialGradientとLoadingは関係ない)


 

1. 0番が中央、1番左上、2番右上、3右下、番4左下である。
2. 色は2色設定できる。
3. LinearGradient と比較して種類は少ない。
4. 主に大きな背景塗り用途として使用するが、用途は自由である。
5. 原則、Bitmap()で表示するが、beginBitmapFill()でも利用可能である。(デモ参照)


利用例

beginBitmapFill()で利用


//RadialGradient
//幅、高さ、色1、色2、タイプ、0中心、4隅1-4
var backimg=createRadialGradBox (canvasWidth,canvasHeight,"#DB7093","#555555",0);
backrect=new createjs.Shape();
//Gradient塗り
backrect.graphics.beginBitmapFill(backimg).drawRect(0,0,canvasWidth,canvasHeight);
stage.addChild(backrect);

Bitmap()で利用


//RadialGradient
//幅、高さ、色1、色2、タイプ、0中心、4隅1-4
var backimg=createRadialGradBox (canvasWidth,canvasHeight,"#DB7093","#555555",0);
backrect=new createjs.Bitmap(backimg);
stage.addChild(backrect);

 

その他

▲[ 目次 ]


Loadingを作る

当方使用のLoadingは、CreateJS Graphicsクラスで作っているが、Canvasエレメント描画で作りBitmap()に取り込み表示して回転させる事も可能である。
Canvasエレメント描画は癖があるので、CreateJS Graphicsクラスで作った方が簡単と思う。単に「イキオイ」出作ってみただけである。(図は上のRadialGradientに居候している)


「デモ」で2番目の「Loading2、弧状」を使用している。


1. 段階的に透過状にしたほうが、回転が判り易い。
2. 気のせいか少し回転がスムーツのようだ。
3. Canvasエレメント描画の方が面倒かと思うし、メリットは無い。


● Loading1、半弧状


var w=40;
var angle=10;
var color="#FF0000";

//要素幅、高さ、半径、色
loadingImage=new createjs.Bitmap(createLoadingImage(w,w,15,color));

//Canvas画像Loading/半弧
function createLoadingImage (w,h,r,color) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var rate=0.75;//描画率 0.3-0.9

	var ctx=canvas.getContext("2d");
	ctx.lineWidth=2;
	ctx.strokeStyle=color;
	ctx.beginPath();
	ctx.arc(w/2,h/2,r,0,Math.PI*2*rate);
	ctx.stroke();

	return canvas;
}

● Loading2、弧状 (使用中)


var w=40;
var angle=10;
var color="#FF0000";

//要素幅、高さ、半径、色
loadingImage=new createjs.Bitmap(createLoadingImage2(w,w,15,color));
loadingImage.regX=w/2;
loadingImage.regY=w/2;
loadingImage.tick=function(){
	loadingImage.rotation +=angle;
};

//Canvas画像Loading2/弧状arc
function createLoadingImage2 (w,h,r,color) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;

	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(color);

	var count=12;//分割12-36
	var color_v;
	var alpha_v=1;//最初のalpha値
	var alphaVx=1/count;//alpha変化値
	var start_angle=0;//始点の角度
	var end_angle=0;//終点の角度
	var angle_w=Math.PI*2/count;//弧の角度

	//Context
	var ctx=canvas.getContext("2d");
	//弧状arc描画、右回転用
	for (var i=0; i < count; i++){
		//透明度
		if (count > 0) {alpha_v -=alphaVx;}
		start_angle -=angle_w;
		end_angle=start_angle+angle_w;

		//rgbaのデータ設定
		var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);//変換

		//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);//手書き1
		//var alphaback="rgba(255,0,0,"+ alpha_v +")";//手書き2

		ctx.lineWidth=2;//幅
		ctx.lineCap="butt";//両端形状
		ctx.strokeStyle=alphaback;
		//ライン描画
		ctx.beginPath();//重要
		ctx.arc(w/2,h/2,r,start_angle,end_angle);
		ctx.stroke();
	}

	return canvas;
}

右回転専用ですが、左巻き回転にする場合は、下記の様に修正する。(3、4番も同じ)


start_angle -=angle_w;

をプラスにすると描画の方向が変わる
start_angle +=angle_w;

--------------------------------------------------------------
rotationをマイナスにする
loadingImage.tick=function(){
	loadingImage.rotation -=10;
};

● Loading3、円周に円配置


//円形描画/要素幅、高さ、半径、パーツ半径、分割数、色
loadingImage=new createjs.Bitmap(createLoadingImage3(w,w,15,3,12,color));

//Canvas画像Loading3/外周円描画クセあり
//要素幅、高さ、半径、パーツ半径、分割数、色
function createLoadingImage3 (w,h,r,r2,division,color) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;

	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(color);

	var count=division;//分割
	var color_v;
	var alpha_v=1;//最初のalpha値
	var alphaVx=1/(count+1);//alpha変化値修正
	var start_angle=0;//始点の角度
	var angle=Math.PI*2/count;//角度

	//Context
	var ctx=canvas.getContext("2d");
	ctx.translate(w/2,h/2);

	//arc描画、右回転用
	for (var i=0; i < count; i++){

		ctx.save();
		//透明度
		if (count > 0) {alpha_v -=alphaVx;}
		start_angle -=angle;
		ctx.rotate(start_angle);

		//rgbaのデータ設定
		var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);//変換
		//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);//手書き1
		//var alphaback="rgba(255,0,0,"+ alpha_v +")";//手書き2

		ctx.fillStyle=alphaback;
		ctx.beginPath();//重要
		ctx.arc(0,r,r2,0,Math.PI*2);
		ctx.fill();
		ctx.restore();

	}

	ctx.restore();
	return canvas;
}

● Loading4、円周にライン配置


//ライン描画/要素幅、高さ、半径1、半径2、分割数、色
loadingImage=new createjs.Bitmap(createLoadingImage4(w,w,15,10,12,color));

//Canvas画像Loading4/ライン描画
//要素幅、高さ、半径、半径、分割数、色
function createLoadingImage4 (w,h,r,r2,division,color) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;

	//16進カラーをrgbの形式に変換
	var rgbArr=toRgb(color);

	var cx=w/2;//中心
	var cy=w/2;
	var rx,ry;
	var count=division;//分割
	var color_v;
	var alpha_v=1;//最初のalpha値
	var alphaVx=1/(count+1);//alpha変化値修正
	var start_angle=0;//始点の角度
	var angle=Math.PI*2/count;//角度

	//Context
	var ctx=canvas.getContext("2d");
	//line描画、右回転用
	for (var i=0; i < count; i++){

		//透明度
		if (count > 0) {alpha_v -=alphaVx;}
		start_angle -=angle;

		//rgbaのデータ設定
		var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);//変換
		//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);//手書き1
		//var alphaback="rgba(255,0,0,"+ alpha_v +")";//手書き2

		ctx.lineWidth=2;//幅
		ctx.lineCap="round";//両端形状
		ctx.strokeStyle=alphaback;
		rx=Math.cos(start_angle)*r;
		ry=Math.sin(start_angle)*r;
		ctx.moveTo(rx+cx,ry+cy);
		rx=Math.cos(start_angle)*r2;
		ry=Math.sin(start_angle)*r2;
		ctx.lineTo(rx+cx,ry+cy);
		ctx.stroke();

	}

	return canvas;
}

16進カラーをrgbの形式に変換

透過のものは、rgbの形式で記載しなければナラ無いので、「16進カラーをrgbの形式に変換」しています。
rgbの形式で記述の場合は、下に例をかいている。直接記載は上記の方式を削除して2つの内使い易いもので記載すれば良い。これは好みであるが...


//16進カラーをrgbの形式に変換
var rgbArr=toRgb(color);

//rgbaのデータ設定
var alphaback=createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],alpha_v);//変換

//var alphaback=createjs.Graphics.getRGB(255,0,0,alpha_v);//手書き1
//var alphaback="rgba(255,0,0,"+ alpha_v +")";//手書き2

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

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

その他の利用

当初、Canvasエレメント描画部材は「代替画像」として利用した。画像取得が出来ない場合にCreateJSでは画像処理が「エラー」に成る事が多いのでそれを防止する目的であった。
どのように使用するかは個人のアイデア次第である。


使用画像

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


▲[ 目次 ]


 

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


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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]