POPSブログ

CreateJS 「サークルテキスト」アニメーション、Tweenをwait()で連続操作する(虹色)

235

  Category:  javascript2013/07/15 pops 

CreateJSを利用してキャンバス、円周上にレインボー色(虹色)の「サークルテキスト」を表示します。前の「テキストアニメーション」と同じようなものですが「全体」を回転運動させていません、文字を円周上に配置していますが文字間(間隔)がほぼキレイに揃います。
「テキスト要素」毎のアニメと「全体」のアニメとの複合形式で「集合拡散」を連続して表現します。
easeljs-0.7 でのテストです。

 

CreateJS 「サークルテキスト」アニメーション、Tweenをwait()で連続操作するテスト


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/21)


テキストアニメーションは、AS AS3アニメを書き換えたような感じです。まだ単純ですが、CreateJSのTweenが高性能ですからアレンジが可能と思います。但しブラウザにより「回転精度」「描画品質」が違いますので注意。回転は可能ですがこのデモでは「回転」させていません。

 

[説明図]

 

1. 分解した文字を独立させましたので「サークルテキスト」アニメーションが可能です。少々重いのが難点。
ブラウザ、マシン性能で大きな差がでますので注意下さい。
2. 文字は指定色、レインボー色(虹色)どちらも指定出来ます。アニメーションの途中で色を替える事も出来ます。
3. 文字のアニメーション(Tween)は基本的に個人が作成します。現時点ではキャンバス描画テキストは全体的にアニメ品質は良くない。将来改善されるのを期待。
4. このデモでは「サークルテキスト」を回転させていません。(回転可能)

 

DEMO


CreateJS 「サークルテキスト」アニメーション、Tweenをwait()で連続操作する (createJS026.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>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。このデモでは preloadjs を使用していません。


HTML (HTML5)


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

JS

createJS026.js、JS名は任意に変更可。easeljs-0.7用


//日本語
//createJS026.js
//easeljs-0.7用デモ用
//Circleテキストrainbow-Color

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

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

//circleテキスト
var mainstring="ViVa POPS WEB KOUBOU.ViVa POPS WEB KOUBOU.";
var base_angle=-87;//ベース角度補正
var range=360;//配置範レンジ囲角度 180 240 360

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

//ステージ
var stage;
//box
var backrect;
var circlecontainer;

//TEXT
var viewtext;

//Circle-TEXT
var circleBase;
//MOVE-TEXT保存
var textChip=[];
var textPosx=[];
var textPosy=[];

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

var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#778899","#BC8F8F","#20B2AA"];

//サークル用グローバル変数
var textlen=0;
var textcount=0;

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

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

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

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

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

	//circle-Text circlecontainer
	circlecontainer=new createjs.Container();
	circlecontainer.x=canvasWidth/2;
	circlecontainer.y=canvasHeight/2;
	//ベース
	circleBase=new createjs.Container();
	circleBase.rotation=base_angle;//回転修正
	circlecontainer.addChild(circleBase);
	stage.addChild(circlecontainer);

	//簡易TEXT、Arialに変更
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);
	set_text("START");

	stage.update();

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

	//調整
	setTimeout(function() {

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

	},2000);

}

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

	set_text("");
	set_circletext();

}

//サークルテキストアニメ/使用
function set_circletext() {

	textcount=0;//文字カウント、グローバル
	var text_spc=0;//テキストスペース

	var radius=canvasHeight/2*.8;//サークル半径
	var circlestring=mainstring+"";//文字補正空白いれる
	//ベース
	circleBase=new createjs.Container();
	circlecontainer.addChild(circleBase);
	//ベース角度補正
	//circleBase.rotation=-87;
	circleBase.rotation=base_angle;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#CCCCCC",true,text_spc,circlestring);
	textlen=circlestring.length;//グローバル

	//全幅
	text_W=0;
	for (var i=0; i < textlen; i++) {
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		text_W +=textChip[i].width;
	
	if(i < textlen) {text_W +=text_spc;}
	}
	//間隔の基準時間
	var base_time=150;

	//delay
	var delay_st=[];

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

	var k=0;
	var flag=-1;
	var angle=0;
	var textwrap=[];

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

		angle=textPosx[i]/text_W*range;//展開角度
		//WRAP
		var wrap=new createjs.Container();
		wrap.regX=0;
		wrap.regY=radius;
		wrap.x=0;
		wrap.y=0;
		wrap.rotation=angle;//angle;
		textChip[i].x=0;
		textChip[i].y=0;

		//移動
		textChip[i].x=0;//0
		textChip[i].y=radius*2*chg_v;//外から、中心から
		//識別ID登録
		textChip[i].id=i;

		textChip[i].scaleX=5;//0
		textChip[i].scaleY=5;//0
		textChip[i].rotation=360;//0
		textChip[i].alpha=0;//1

		//addChild
		wrap.addChild(textChip[i]);
		textwrap[i]=wrap;
		//addChild
		circleBase.addChild(textwrap[i]);

		k ++;
		flag *=-1;
	}

	//delay計算、delay逆転が効かない
	var k=0;
	var flag=-1;
	var sh=textlen-1;
	var kk=0;
	for (var i=0; i < textlen; i++) {
		kk=sh-i;

		//反対
		if (pattern_no == 0) {
			delay_st[i]=base_time*kk;
		}
		//中から
		if (pattern_no == 1) {
			delay_st[i]=Math.abs(i-sh/2)*base_time*1.5;
		}
		//外から
		if (pattern_no == 2) {
			delay_st[i]=i*base_time*1.5;
			if (i > sh/2) {delay_st[i]=kk*base_time*1.5;}
		}
		//正
		if (pattern_no > 2) {
			delay_st[i]=base_time*i;
		}
		//交互遅延
		if (chgflag==1) {
			if (flag<0) {delay_st[i] +=500;}
		}

		k ++;
		flag *=-1;
	}

	set_text("PATTERN / "+pattern_no);

	//delayの最大値を求める
	var max_delay=Math.max.apply(null,delay_st);

	//収縮ポイント移動
	var radius_y=radius*(chgflag2-1);
	var scale_end=(chgflag-1)*2;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:0,y:radius_y,scaleX:0,scaleY:0,rotation:0,alpha:1},1000)
		.to({x:0,y:20,scaleX:.75,scaleY:.75,rotation:180,alpha:1},1000)
		.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.wait(1000)
		.to({x:0,y:-50,scaleX:1.5,scaleY:1.5,rotation:0,alpha:.5},800)
		.wait(600)
		.to({x:0,y:0,scaleX:1,scaleY:1,rotation:0,alpha:1},600)
		.wait(5000)
		.to({x:0,y:canvasWidth/2*(chgflag-1),scaleX:scale_end,scaleY:scale_end,rotation:0,alpha:0},800)
		.call(function(){
			//終了
			if (textcount == textlen-1) {finshAll();}
			textcount +=1;//グローバルの事
		});
	}

}

//サークルテキストアニメ標準/未使用
function set_circletext_st() {

	textcount=0;//グローバル
	var text_spc=0;//テキストスペース

	var radius=canvasHeight/2*.8;//サークル半径
	var circlestring=mainstring+" ";//文字補正空白いれる
	//ベース
	circleBase=new createjs.Container();
	circlecontainer.addChild(circleBase);
	//ベース角度補正
	circleBase.rotation=-87;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#CCCCCC",true,text_spc,circlestring);
	textlen=circlestring.length;//グローバル

	//全幅
	text_W=0;
	for (var i=0; i < textlen; i++) {
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		text_W +=textChip[i].width;
		if(i < textlen) {text_W +=text_spc;}
	}

	var k=0;
	var flag=-1;
	var angle=0;
	var textwrap=[];

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

		angle=textPosx[i]/text_W*range;//展開角度
		//WRAP
		var wrap=new createjs.Container();
		wrap.regX=0;
		wrap.regY=radius;
		wrap.x=0;
		wrap.y=0;
		wrap.rotation=angle;//angle;
		textChip[i].x=0;
		textChip[i].y=0;

		//移動
		textChip[i].x=0;//0
		textChip[i].y=radius*2;//外から、中心から
		//識別ID登録
		textChip[i].id=i;

		textChip[i].scaleX=5;//0
		textChip[i].scaleY=5;//0
		textChip[i].rotation=360;//0
		textChip[i].alpha=0;//1

		//addChild
		wrap.addChild(textChip[i]);
		textwrap[i]=wrap;
		//addChild
		circleBase.addChild(textwrap[i]);

		k ++;
		flag *=-1;
	}

	//間隔の基準時間
	var base_time=150;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(base_time*i)
		.to({x:0,y:radius,scaleX:0,scaleY:0,rotation:0,alpha:1},1000)
		.to({x:0,y:20,scaleX:.75,scaleY:.75,rotation:180,alpha:1},1000)
		//.wait(base_time*textlen-base_time*i)
		.wait(base_time*(textlen-i))
		.to({x:0,y:-30,scaleX:1.5,scaleY:1.5,rotation:0,alpha:.5},600)
		.wait(600)
		.to({x:0,y:0,scaleX:1,scaleY:1,rotation:0,alpha:1},600)
		.call(function(){
			//終了
			if (textcount == textlen-1) {finshAll();}
			textcount +=1;//グローバルの事
		});
	}

}

//終了
function finshAll () {

	//END
	set_text("END");
	//調整
	setTimeout(function() {

		set_text("AUTO");
		reset_text();

	},2000);
}

//tickステージ
function tick() {
	stage.update();
}

//背景色変更
function backchg() {
	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

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

	var fontdata=size + " " + font;

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

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

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,100,50);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

//reset_text
function reset_text() {

	set_text("CLEAR");

	//コンテナの中を削除
	circleBase.removeAllChildren();
	stage.update();

	//調整
	setTimeout(function() {
		set_prologue();
	},2000);

}

//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
}

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

//START
init();

注釈文を削除すれば、幾分早くなります。

easeljs-0.7より イベント関連処理が変更になりましたので修正しました。


CSS

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


/*日本語 createJS026.css*/

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

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}

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

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


簡単な説明


テキスト文字を分解インスタンス化して配列で返す

[説明図] 前のページの記事を参照

 

テキスト文字の分解組み立ては、1文字ずつ取り出しTextクラスのインスタンスを作り、中心補正して並べて行く作業になります。上図の様な方法です。円周上に配置する際は角度の比率に換算して配置しています。
詳細は、「前のページ」の記事を参照下さい。


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

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


テキスト文字を円周上に配置する

基本的に、文字を横に並べて行くのと原理は同じですが、「テキストアニメーション」をし易くするために wrap して中の「テキスト要素」の X Y位置、角度を 0 にしているのが特徴です。wrapに回転角度を与え「テキスト要素」のTweenを容易にさせます。


1. テキスト文字を円周上に配置する際の文字間隔を角度に替えているだけです。
2. テキストアニメーションは通常の角度、(degree)で計算しました。(radian計算可能)
3. wrapの半径radiusで「テキスト要素」が外周に配置されます。「テキスト要素」Y位置を調整することにより集合離散できます。全てが円の中心に向かいますのでキレイです。
4.「テキスト要素」の角度は 0 ですからTweenさせる場合に楽になります。動きは好み次第に設計できます。
5. 問題は文字の品質がブラウザで違い、外周を円運動させた場合重くなることです。出来れば円運動はさせない方が良い。Chromeでは描画品質が特に悪い!。
(Firefox Safari Chrome 以外で「マシン性能が良い」場合(IE9 Opera)は問題は無いが、この点1-2年待たねば成らない?(MAC Safariは未確認)
6. ベースをコンテナ(circlecontainer)に入れていますが直接ステージに配置しても良い。
7. デモでは文字を360度周回させていますので、文字列の「外から、中から」の位置の違いが判りません。文字を180度展開させれば違いが判ります。


サークルテキストアニメ標準形

ループを分離していないため同じです。修正はしていません。

大体の処理標準であるこれをアレンジすれば良い。デモの set_circletext() はこれを原型に作られている。

注意、360度に展開させた場合のバランスのため、文字列の最後に「半角スペース」を入れています。必要ない場合は修正下さい。


//サークルテキストアニメ標準
function set_circletext_st() {

	textcount=0;//グローバル
	var text_spc=0;//テキストスペース

	var radius=canvasHeight/2*.8;//サークル半径
	var circlestring=mainstring+" ";//文字補正空白いれる
	//ベース
	circleBase=new createjs.Container();
	circlecontainer.addChild(circleBase);
	//ベース角度補正
	circleBase.rotation=-87;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText("32px","Arial","#CCCCCC",true,text_spc,circlestring);
	textlen=circlestring.length;//グローバル

	//全幅
	text_W=0;
	for (var i=0; i < textlen; i++) {
		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		text_W +=textChip[i].width;
		if(i < textlen) {text_W +=text_spc;}
	}

	var k=0;
	var flag=-1;
	var angle=0;
	var textwrap=[];

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

		angle=textPosx[i]/text_W*range;//展開角度
		//WRAP
		var wrap=new createjs.Container();
		wrap.regX=0;
		wrap.regY=radius;
		wrap.x=0;
		wrap.y=0;
		wrap.rotation=angle;//angle;
		textChip[i].x=0;
		textChip[i].y=0;

		//移動
		textChip[i].x=0;//0
		textChip[i].y=radius*2;//外から、中心から
		//識別ID登録
		textChip[i].id=i;

		textChip[i].scaleX=5;//0
		textChip[i].scaleY=5;//0
		textChip[i].rotation=360;//0
		textChip[i].alpha=0;//1

		//addChild
		wrap.addChild(textChip[i]);
		textwrap[i]=wrap;
		//addChild
		circleBase.addChild(textwrap[i]);

		k ++;
		flag *=-1;
	}

	//間隔の基準時間
	var base_time=150;

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(base_time*i)
		.to({x:0,y:radius,scaleX:0,scaleY:0,rotation:0,alpha:1},1000)
		.to({x:0,y:20,scaleX:.75,scaleY:.75,rotation:180,alpha:1},1000)
		//.wait(base_time*textlen-base_time*i)
		.wait(base_time*(textlen-i))
		.to({x:0,y:-30,scaleX:1.5,scaleY:1.5,rotation:0,alpha:.5},600)
		.wait(600)
		.to({x:0,y:0,scaleX:1,scaleY:1,rotation:0,alpha:1},600)
		.call(function(){
			//終了
			if (textcount == textlen-1) {finshAll();}
			textcount +=1;//グローバルの事
		});
	}

}

サークルテキストに文字補正「空白」をいれる

360度に展開した場合に文字バランスを調整するために、標準で最後に「半角空白」を挿入しています。サークルテキストを予め修正して入力しておけばこの処理は不要です。この辺は自由に書き換えてください。


var circlestring=mainstring+" ";//文字補正空白いれる

-------------------------------------------------
実際には文字列を変更してバランスを取っている

//circleテキスト
var mainstring="ViVa POPS WEB KOUBOU.ViVa POPS WEB KOUBOU.";

var circlestring=mainstring+"";//空白いれて無い

通常に横に並べた時、サークルテキストにした時でも同じ「テキスト文字列」を使用出来るように配慮しただけ。この辺は臨機応変に対応下さい!


個別のアニメから全体アニメに切り替える

下記説明の、新たな方法「個別のアニメから全体アニメに切り替える2」を参照下さい。

「個別のアニメ」から「全体アニメ」に切り替える際に、wait() で調整しています。

1.wait()、遅延に差が有れば、1文字ずつアニメされる。
2.遅延に差が無ければ、全て同時にアニメされる。
3.「個別のアニメ」「全体アニメ」を混合して処理する場合は、遅延差を吸収させるwait()処理をどのように書くかが問題だ。順序を反対にしてもまた効果がある。
4. 新たな修正方法を考え、修正する。前のままでも使用は出来ます。2013/07/18


困りはてて咄嗟に考え出したもので、アニメのwaitが複雑だと旨く行かない場合がある。ここも「ゴマカシ」が必要だ!
モット良い方法を誰か考えてくれ!頼むぜヨ!(下記、個別のアニメから全体アニメに切り替える2で新たな方法にした)


前の修正方法 (しばらくしたら削除します)


var base_time=150;

個別のアニメをwaitで操作する、単純な方が無難だ
.wait(base_time*i)

waitで修正してwaitの差をなくす、全体アニメになる
.wait(base_time*(textlen-i))

余り複雑にしたり、交互切り替え(「個別」「全体」)が多いと、アタマがパンクするので単純のほうが良い。


● 個別のアニメから全体アニメに切り替える2 (新たな方法)

誤差の無い、新たな方法があったので修正する。交互遅延などにも問題なく対処出来る簡単な理屈で、最大の遅延時間を求めてその値から修正する方法にした。

よって、新たな方法に修正しました。2013/07/18

但し、delayの最大値を求める為に処理ループが分割されていないと計算できませんので注意下さい。


新たな修正方法

//delayの最大値を求める
var max_delay=Math.max.apply(null,delay_st);

.wait(max_delay-delay_st[i])//最大値利用時間差吸収

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

前の修正方法は正確ではなかった

古い遅延修正
.wait((base_time*textlen-delay_st[i])+500)

Tweenの終了処理

waitで処理順序が変わりますので特別な処理で「終了」を知る様にします。全ての「テキスト要素」のアニメ回数の「終了」をカウントして判別します。当方の「画像分解」アニメの手法と同じです。
Tweenには complete が有りませんので、Tween「終了」を知るための関数を加えます。textlen、textcountはグローバル変数で無いと機能しませんので注意下さい。
複数の要素を、wait で操作しているため面倒になっています。他に方法が有れば作ってください。


.call(function(){
	//終了
	if (textcount == textlen-1) {finshAll();}
	textcount +=1;//グローバルの事
});

円周上の文字位置の補正

デモでは、文字は12時の位置より配置されて行きますので、「角度調整」が必要になります。デモでは90度左にベースを回転させて修正しますが、元々は「横並び用」の文字列を角度で並べていますので、状況に応じて補正します。

「テキスト文字」配置の際に「角度調整」分を加算しても良いが、簡単にベース回転で補正しています。


var base_angle=-87;//ベース角度補正
-------------------------------------------------

//ベース角度補正
//circleBase.rotation=-87;
circleBase.rotation=base_angle;

文字の展開(円周上の配置)角度

円状に展開するには360度指定、半円なら180度指定と弧状にも展開可能です。文字を挿入する時に「全体の角度」を指定しているだけで簡単ですね。
配置を見て、文字列の長さ、半径、文字の大きさ、など見やすい様に変更します。


var range=360;//配置範レンジ囲角度 180 240 360
-------------------------------------------------

実際の文字挿入で角度を修正
angle=textPosx[i]/text_W*range;//展開角度

文字列を分解して配置すると重くなる

キャンバス処理でも、TEXT文字は「CSS処理」であるのが原因かナ!。スコブル重く成るので注意が必要だ。マシン性能がよければ問題は少ないだろうが、マシン環境が悪いと大変だ。当然ながら「デモ」では外側の「角丸陰影BOX」のCSSも影響しています。
将来的には改善されるだろうが?


 

その他

DEMO専用です。使用する事は可能ですが、あくまでもテストですので個人の判断で使用下さい。画像などは各自ご用意下さい。JSの先頭部分をお読み下さい。
但し、効率的な方法があれば、予告無くスクリプトなど修正する場合があります、ご了承下さい。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]