POPSブログ

CreateJS BitmapData Textパーティクル

280

  Category:  javascript2014/02/22 pops 

BitmapDataクラスを利用しテキストをBitmapDataで1ピクセルに分解して(20000個前後)、集合拡散を繰り返すTextパーティクルです。テキストはCanvas要素で作っていますので画像と同等です。多少の問題点はありますが、一応作動します。
easeljs-0.7 でのテストです。

 

CreateJS BitmapData Textパーティクル テスト


[ BitmapData Textパーティクル の目次 ]


 

BitmapDataを扱いたいので kudox さんが配布されている BitmapDataクラス を使用しました。下記のページに詳細が有ります。サンプル、マニュアル(日本語)も完備されています。

【参照】kudox.jp記事: BitmapData for EaselJS ver1.00 リリースのお知らせ


 

DEMO


CreateJS BitmapData Textパーティクル テスト、(createJS065.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/bitmapdata-1.0.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。
尚、別途にkudoxさんの bitmapdata-1.0.0.min.js が必要です。

このデモでは、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

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

通常の CreateJSテキスト処理の部分 は説明用ですので、削除ください。



//日本語
//createJS065.js
//BitmapDataテキストパーティクル
//easeljs-0.7用

//------------------------------------------------------
//初期設定
//タイマーの使用、true false
var timerUse=true;//true
//切り替えインターバルタイム値 2000-5000
var time=2000;

//canvasの大きさ
var canvasWidth=640;
var canvasHeight=300;
//文字BOXの大きさ
var textBoxWidth=200;
var textBoxHeight=60;

//パーティクルTextの種類 改行無しtrue、改行あり false
var textType=true;

//パーティクルOUTの使用 true false
var outUse=true;
//INパーティクル表示時間5000-10000
var pin_time=5000;

//パーティクルステージ内true、外false
var in_stage=false;
//内側、散らばす範囲 1-2
var range_v=1.5;
//外側、散らばす範囲 2-4
var range2_v=2.5;

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

//説明TEXT
var textUse=true;

//最初の画像0のこと
var textBox_no=0;
//TEXT数
var textBox_max;

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

//ステージ
var stage;
//コンテナ
var overcontainer;
//画像 Bitmapインスタンス
var welcomeImage,overImage;
//Text画像result
var textImage;

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

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

//変数
var timerID=null;
//BitmapData
var bitmapdata;
var set_bmd;

//最大値
var bmd_max;
//位置補正値
var posX_v;
var posY_v;
var maxflag=0;
//Particle
var particles=[];

//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();
	stage.addChild(welcomeImage);
	//表示
	welcomeImage.visible=true;

	//簡易Loader/Firefox対策
	var img=new Image();
	img.src="/main/images/yakei.png";
	img.onload=function() {
		//Bitmap流し込み
		welcomeImage.image=new createjs.Bitmap(img).image;
	}

	//overImage/BitmapData表示領域
	overcontainer=new createjs.Container();
	//最重要、BitmapDataは最初からなければならない
	set_bmd=new createjs.BitmapData(null,canvasWidth,canvasHeight);
	overImage=new createjs.Bitmap(set_bmd.canvas);
	overcontainer.addChild(overImage);
	stage.addChild(overcontainer);

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

	//遅延
	setTimeout(function() {

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

	},2000);

}

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

var w=textBoxWidth;
var h=textBoxHeight;

	//改行無しText
	if(textType) {

		//TextData/TEXT付きcanvasを作る
		//幅、高さ、色、文字種、サイズ、文字色、ストリング
		assets[0]=createTextCanvas (w,h,"rgba(0,0,0,0)","Arial","bold 32px","#FFFFFF",'WELCOME');
		assets[1]=createTextCanvas2 (w,h,"#FFFFFF","Arial","bold 32px","#32CD32",'WELCOME2');
		assets[2]=createTextCanvas3 (w,h,"#FFB6C1","Arial","bold 32px","#FF0000",'WELCOME3');
		assets[3]=createTextCanvas4 (w,h,"#FFA500","Arial","bold 32px","#FFFFFF",'WELCOME4');
		assets[4]=createTextCanvas4 (w,h,"#6496ED","Arial","bold 32px","#FF0000",'WELCOME5');
		assets[5]=createTextCanvas5 (w,h,"#FFFFFF","Arial","bold 28px","#FFD700",'WELCOME6');
		assets[6]=createTextCanvas5 (w,h,"#FF1493","Arial","bold 28px","#FF69B4",'WELCOME7');
	}

	//簡易改行複数Text
	if(!textType) {
		//TextData/TEXT付きcanvasを作る
		assets[0]=createMultipleText (w,h,"#FFA500","Arial","bold 15px","#FFFFFF","複数テキスト表示用¥n改行したように¥n見せることが出来ます");
		assets[1]=createMultipleText (w,h,"#FFFFFF","Arial","13px","#FF0000","複数のテキストを表示は出来ますが¥n自動で改行は出来ませんので¥n単に表示が可能な程度だ");
		assets[2]=createMultipleText (w,h,"#888888","Arial","12px","#FFFFFF","表示状況を確認しながら¥n文字の大きさなどで調整します¥nそんな程度で結構面倒になります");
		assets[3]=createMultipleText (w,h,"#48D1CC","Arial","12px","#FFFFFF","CreateJSのTextクラスを使用していません¥nキャンバスに文字を並べていますので¥n多少の位置調整など可能になります");
		assets[4]=createMultipleText (w,h,"rgba(0,0,0,0)","Arial","bold 16px","#FFFFFF","WELCOME¥nWELCOME2¥nWELCOME3");
		assets[5]=createMultipleText (w,h,"#FFA500","Arial","bold 16px","#FFFFFF","WELCOME¥nWELCOME2¥nWELCOME3");
		assets[6]=createMultipleText (w,h,"#48D1CC","Arial","bold 16px","#FFD700","WELCOME¥nWELCOME2¥nWELCOME3");
	}

//CreateJS Textクラスで描く場合の例、未使用削除下さい
/*
assets[0]=new createjs.Text("複数テキスト表示用¥n改行したように¥n見せることが出来ます","bold 15px Arial","#FFFFFF");
assets[1]=new createjs.Text("複数のテキストを表示は出来ますが¥n¥n自動で改行は出来ませんので¥n¥n単に表示が可能な程度だ","12px Arial","#FF0000");
assets[2]=new createjs.Text("表示状況を確認しながら¥n文字の大きさなどで調整します¥nそんな程度で結構面倒になります","12px Arial line-height:1","#FF00FF");
assets[3]=new createjs.Text("CreateJSのTextクラスを使用しています¥nキャンバス利用でないために¥n背景色、位置調整などが困難になります","12px Arial line-height:1","#88FFFF");
assets[4]=new createjs.Text("WELCOME¥nWELCOME2¥nWELCOME3","bold 16px Arial","#CCCCCC");
assets[5]=new createjs.Text("WELCOME¥nWELCOME2¥nWELCOME3","bold 16px Arial","#888888");
assets[6]=new createjs.Text("WELCOME¥nWELCOME2¥nWELCOME3","bold 16px Arial","#FFD700");
*/

	//画像数計算
	textBox_max=assets.length;

	//particle作成
	make_particle();

}

//make-particle
function make_particle () {

	//画像分割数
	bmd_max=textBoxWidth*textBoxHeight;

	//位置補正値中央
	posX_v=(canvasWidth-textBoxWidth)/2;
	posY_v=(canvasHeight-textBoxHeight)/2;

	//range_v散らばす範囲設定
	//Particle
	particles=[];

	var k=0;
	for (var i=0;i < textBoxWidth;i++) {
		for (var j=0;j < textBoxHeight;j++) {

			var rs=Math.random()*(360);
			var rv=Math.random()*100;
			//中心補正
			if (in_stage) {
				//内
				var x=((Math.random()*canvasWidth*2)-canvasWidth+textBoxWidth*2)*range_v;
				var y=((Math.random()*canvasHeight*2)-canvasHeight+textBoxHeight)*range_v;
			} else {
				//外
				//適当計算
				var x=Math.floor(Math.cos(rs)*(canvasWidth*0.85+rv*range2_v))+canvasWidth/2;
				var y=Math.floor(Math.sin(rs)*(canvasWidth*0.85+rv*range2_v))+canvasHeight/2;
			}

			var color=0x00000000;
			particles[k]=new Particle(1,x,y,i+posX_v,j+posY_v,x,y,color);//ID付き

			k ++;

		}
	}

	//画像表示に進む
	draw();
}

//DRAW、アニメ
function draw() {

	set_text("IN");

	maxflag=0;

	//保存Canvasテキスト要素代入
	textImage=assets[textBox_no];
	//色取得のためBitmapData変換
	bitmapdata=new createjs.BitmapData(textImage);

/*
//CreateJS Textクラスの処理、未使用削除下さい
assets[textBox_no].cache(0,0,200,60);
bitmapdata=createjs.BitmapData.getBitmapData(assets[textBox_no]);
*/

	//overImage bitmapdata保存処理
	var c;
	var k=0;
	for (var i=0;i < textBoxWidth;i++) {
		for (var j=0;j < textBoxHeight;j++) {

			var p=particles[k];
			//要素の色を取得保存
			c=bitmapdata.getPixel32(i,j);
			p.color=c;
			k ++;
		}
	}

	//Ticker
	createjs.Ticker.addEventListener('tick',move_particles);
}

//集合particles-IN
function move_particles (event) {

	//BitmapData canvasクリア
	set_bmd.clearRect(0,0,canvasWidth,canvasHeight);

	var k=0;
	for (var i=0;i < bmd_max;i++) {

		var p=particles[k];

		//ID
		var id=p.id

		//現在値
		var x=p.x;
		var y=p.y;

		//集合位置
		var sx=p.sx;
		var sy=p.sy;

		//集合速度
		x +=(sx-x)*.1;
		y +=(sy-y)*.1;

		//接近
		if (Math.abs(x-sx) < 0.5 && Math.abs(y-sy) < 0.5) {
			if(id) {
				p.id=0;
				x=sx;y=sy;
				maxflag ++;
			}
		}

		//要素の色を付ける
		if (x > 0) {
			set_bmd.setPixel32(x,y,p.color);
		}

		//保存
		p.x=x;
		p.y=y;

		k ++;

	}

	//setPixelのupdate
	set_bmd.updateContext();

	//終了
	if (maxflag >= bmd_max) {
		finsh_move();
	}

}

//OUT拡散
function out_set () {

	maxflag=0;

	//ここで拡散位置を計算しても良い

	set_text("OUT");
	//OUT表示に進む
	//パーティクルステージ内
	if (in_stage) {createjs.Ticker.addEventListener('tick',out_particles);}
	//パーティクルステージ外
	if (!in_stage) {createjs.Ticker.addEventListener('tick',out_particles2);}

}

//拡散内部用particles-OUT
function out_particles (event) {

	//BitmapData canvasクリア
	set_bmd.clearRect(0,0,canvasWidth,canvasHeight);

	var len=particles.length;
	var k=0;
	for (var i=0;i < len;i++) {

		var p=particles[k];

		//ID
		var id=p.id;
		//現在値
		var x=p.x;
		var y=p.y;
		var ox=p.ox;
		var oy=p.oy;

		//適当な拡散
		x +=(p.ox-x)*.02;
		y +=(p.oy-y)*.02;

		//接近
		if (Math.abs(ox-x) < 100 && Math.abs(oy-y) < 100) {
			if(id == 0) {
				p.id=1;
				x=ox;y=oy;
				maxflag ++;
				len --;
				particles.splice(i,1);
				len=particles.length;
				//消す
				set_bmd.setPixel32(x,y,0x00000000);
			}
		}

		//要素の色を付ける
		if (id == 0) {
			if (x > 0) {
				set_bmd.setPixel32(x,y,p.color);
			}
		}

		//保存
		p.x=x;
		p.y=y;

		k ++;
	}

	//setPixelのupdate
	set_bmd.updateContext();

set_text(""+len);

	//終了
	if (len == 0){finsh_out();}

}


//拡散外部用particles-OUT
function out_particles2 (event) {

	//canvasクリア
	set_bmd.clearRect(0,0,canvasWidth,canvasHeight);

	var len=particles.length;
	var k=0;
	for (var i=0;i < len;i++) {

		var p=particles[k];

		//現在値
		var x=p.x;
		var y=p.y;
		var ox=p.ox;
		var oy=p.oy;

		//適当な拡散
		x +=(x-p.ox)*.02;
		y +=(y-p.oy)*.02;

		//要素の色を付ける
		if (x > 0 && Math.abs(x-p.ox) > 10) {
			set_bmd.setPixel32(x,y,p.color);
		}

		//保存
		p.x=x;
		p.y=y;

		//ステージの外に出た
		if ((x <= 0) || (x > canvasWidth) || (y < 0) || (y > canvasHeight)) {
			len --;
			particles.splice(i,1);
			len=particles.length;
		}

		k ++;
	}

	//setPixelのupdate
	set_bmd.updateContext();

set_text(""+len);

	//終了
	if (len == 0){finsh_out();}

}

//move完了
function finsh_move () {

	set_text("finsh-IN");
	createjs.Ticker.removeEventListener('tick',move_particles);

	if (!outUse) {
		finshtween ();
	}
	if (outUse) {
		//INパーティクル表示時間
		setTimeout(function() {
			out_set();
		},pin_time);
	}

}

//out完了
function finsh_out () {

	//パーティクルステージ内
	if (in_stage) {createjs.Ticker.removeEventListener('tick',out_particles);}
	//パーティクルステージ内外
	if (!in_stage) {createjs.Ticker.removeEventListener('tick',out_particles2);}

	//TWEENなし
	finshtween ();

}

//全て完了
function finshtween () {

	set_text("FINISH");

	//少し遅延
	setTimeout(function() {

		//タイマー次ぎ開く
		if (timerUse) {
			set_timer();
		}
	},500);

}

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

//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	textBox_no +=1;
	if (textBox_no > (textBox_max-1)) {textBox_no=0;}

	set_text("AUTO");

	//パーティクル計算に戻る
	make_particle ();

}

//タイマー
function set_timer() {

	//タイマー再セット
	if (timerUse) {

		//一旦切ってからセット
		clearTimeout(timerID);
		//切り替えインターバルタイム
		timerID=setTimeout(next_set,time);
	}

}

//VIEWTEXT
function set_text(t) {

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

//------------------------------------------------------
//TEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas (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;
	ctx.fillRect(0,0,w,h);

	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;
}
//アウトラインTEXT付きcanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas2 (w,h,c,font,fsize,fcolor,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";
	//文字アウトライン
	ctx.strokeText(text,w/2,h/2);

	return canvas;
}

//虹色TEXT付きcanvasを作る3
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas3 (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;
	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;
		rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		ctx.fillStyle=rainbowColor;

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

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

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

//TEXT付き角丸RoundRectCanvasを作る
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas4 (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;
}
//グラデーション背景TEXT付きcanvasを作る5
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas5 (w,h,c,font,fsize,fcolor,text) {

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

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

	//上指定色下黒グラデーション
	ctx.beginPath();
	var gradient=ctx.createLinearGradient(0,0,0,h);
	//上
	//旨くしないとエラーになるGraphics.getRGB利用した面倒
	//gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],1));
	gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//ダイジョウブ
	//下
	gradient.addColorStop(1.0,'rgb(0,0,0)');
	ctx.fillStyle=gradient;
	ctx.rect(0,0,w,h);
	ctx.fill();

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

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

//------------------------------------------------------
//TEXT付きcanvasを作る/簡易改行用
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createMultipleText (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;
	ctx.fillRect(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;
	textList.forEach(function(text,i){
    		ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  	});

	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]);//ダイジョウブ
	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;
}

//------------------------------------------------------
//Particleクラス
var Particle=(function () {
	function Particle(id,x,y,sx,sy,ox,oy,color) {
		this.id=id;
		this.x=x;
		this.y=y;
		this.sx=sx;
		this.sy=sy;
		this.ox=ox;
		this.oy=oy;
		this.color=color;
	}
	var p=Particle.prototype;
	p.id=0;
	p.x=0;
	p.y=0;
	p.sx=0;
	p.sy=0;
	p.ox=0;
	p.oy=0;
	p.color=0x00000000;
	return Particle;
}());

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

//START
init();

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


CSS

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


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

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


簡単な説明


[説明図]

 

簡単なBitmapData画面での1ピクセル単位、setPixel32着色テキストパーティクル集合拡散サンプルです。
天然記念物の「アホウ」がイキオイで作っているものですから間違いなど有りましてもご容赦下さい。


1. 予めに「透明BitmapData画面(set_bmd)」を作り「使い回し」します。(特殊な形かも知れません)
2. tick毎、setPixel32で着色しupdateContext()で更新表示します。
3. 表示の着色部分は毎回BitmapData画面のclearRect()で削除します。
4. draw()などは使用していません。
5. X値がBitmapData画面左側(X値マイナス)の場合、画面右に表示するため(タタリ...?)修正しています。
...仕様の様な気もするし、私はまだわからない!?
6. テキストはCanvas要素で作っていますので画像と同等です。(CreateJSのTextクラスでも作れるれるが、こちらのほうが背景付きでデザイン可能で多様性がある。)
7. Blur処理などは重く動かないと思いますので、当面予定していません。
8. 一応 easeljs-0.7.1でも可動します。


透明BitmapData画面の作成

最初に、透明BitmapData画面を入れたBitmap()を作成して、パーティクル移動毎にBitmapDataのみ更新します
空Bitmap()で、後でBitmapDataを入れるより簡単になります。全体をレーヤー代わりのコンテナに収容。

サンプルでは、draw()を使用していませんが、draw()を行なう事も可能です。
使用変数など変えている所もありますが、処理は「前々ページ」の「画像パーティクル」と同等です。



//overImage
overcontainer=new createjs.Container();
//最重要、BitmapDataは最初からなければならない
set_bmd=new createjs.BitmapData(null,canvasWidth,canvasHeight);
overImage=new createjs.Bitmap(set_bmd.canvas);
overcontainer.addChild(overImage);
stage.addChild(overcontainer);

TEXTキャンバス要素の色情報を取得

背景付きTEXTキャンバス要素をBitmapData変換して、1ピクセル単位での色情報を取得します。
色情報をパーティクル情報として書き込みます。(あとでこの情報を取り出しsetPixel32する)


//overImage bitmapdata保存処理
var c;
var k=0;
for (var i=0;i < textBoxWidth;i++) {
	for (var j=0;j < textBoxHeight;j++) {

		var p=particles[k];
		//要素の色を取得保存
		c=bitmapdata.getPixel32(i,j);
		p.color=c;
		k ++;
	}
}

パーティクルの作成

1ピクセルの、BitmapDataを動かすために、パーティクル情報のみを持つパーティクルを作り、その情報を元にBitmapDataを動かしました。(移動先の場所の色を替えているだけですが...)
パーティクルはクラス化していますので、new Particle()で作成します。


ID値は、各パーティクルが目的位置に到達したかの判定用です。
posX_v、posY_v はテキストの表示位置の修正用です。 色情報の初期値は 0x00000000 です。透明ですから、これで染めれば画面から消えることにもなります。


//位置補正値中央
posX_v=(canvasWidth-textBoxWidth)/2;
posY_v=(canvasHeight-textBoxHeight)/2;
-------------------------------------------------------------------------------

var color=0x00000000;
particles[k]=new Particle(1,x,y,i+posX_v,j+posY_v,x,y,color);//ID付き

パーティクルの移動

OUTは、1つに纏めることは可能ですが、繁雑になるので、out_particles、out_particles2 に分離しています。
拡散内部用はパーティクル処理終了の手がかりとなる、ID(名前などは何でも良い)などで判定するので工夫が必要だ。

拡散外部用はステージ外に出た場合に判定するので、こちらは簡単で時間も早い。
拡散内部用で、out_particles の場合広範囲に散らばっているため少々完了まで時間がかかります。(内部のみではキレイに見えないので、一部、外部にも描画しているのが遅くなる原因です)

● IN

徐々に目的位置に移動させるが永久に合致しないので、適当な距離で目的位置に合わせる。
パーティクル情報を書き換えて、カウントをUPする。全数処理すれば終了させる。


JS参照

● OUT

パーティクル個別の処理が終了する毎にループ処理を減じ、ループ処理が0で全てを終了させる。
ステージ外に散らばっているので、処理は大まかです。


JS参照

パーティクルのX値がマイナスの場合 [重要]

上記の図参照のごとく、パーティクルのX値がマイナスの場合、画面右に描画される?、原因などワタシには判りません。
修正のため、いろんな事を試してみましたが解決しません。リピートしているのか? ...仕様としたら、別BitmapDataでパーティクルの操作をしてステージ範囲のBitmapDataをdraw()するのも面倒である。

応急処置として、パーティクルのX値がマイナスの場合は描画しないようにしています。(出た!、原因わからずの得意のゴマカシ)


//要素の色を付ける
if (x > 0) {
	set_bmd.setPixel32(x,y,p.color);
}

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

以下の様にすれば状況がわかります

//if (x > 0) {
	set_bmd.setPixel32(x,y,p.color);
//}

パーティクルの要素数

パーティクルの要素数は10000-20000個です、FLASH並の処理能力は有りませんがマシン環境で大きく変わります。
TEST結果からダイタイの値は以下のようです(注意、背景も含む大きさです)。


1. 古いマシン環境、10000個前後 (100x100 200x60)
2. マアマア新しいマシン環境、20000個前後
3. 高性能なマシン環境、20000個以上でも可能とは思います。


背景無しのものは「文字部分のみ」処理すれば良いのですが、まだ対処していません。
そうすればモット多くの文字数を処理できる事に成ります。


テキストをCanvas要素で作る

Canvas要素に HTML5 Canvas の書式でテキスト、背景など描画しますと「png画像」と同等なものが出来ますのでそれを利用します。画像同等のものが直ぐに出来ますので結構便利です。


1. 描画するのは大変ですが、画像と同じなので便利であり、使い道が多い。
2. HTML5 Canvas の書式で書かねばなら無いのが欠点です。
3. 通常の CreateJS Textクラスでも作れるが、cache()等の操作がないので処理が楽です。
4. HTML5 Canvasは複数行のテキスト表示には対応していない。(つまり工夫がいる)
5. ブラウザにより文字位置(Y方向)に若干差が有ります。
6. サンプルを付けましたので、改造すれば幾分楽になるかも知れません。


● 改行無しの1行タイプ

各種のデザイン処理を行っているので、createTextCanvas - createTextCanvas5を参考にされたし。改造は自由であるので好きにする。
背景色無しの場合は透過形にする、色は、rgba形式で記載する rgba(0,0,0,0) 等。


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

	略す

	//改行無しText
	if(textType) {

		//TextData/TEXT付きcanvasを作る
		//幅、高さ、色、文字種、サイズ、文字色、ストリング
		assets[0]=createTextCanvas (w,h,"rgba(0,0,0,0)","Arial","bold 32px","#FFFFFF",'WELCOME');
		assets[1]=createTextCanvas2 (w,h,"#FFFFFF","Arial","bold 32px","#32CD32",'WELCOME2');
		略す
	}

	//簡易改行複数Text
	if(!textType) {
		//TextData/TEXT付きcanvasを作る
		assets[0]=createMultipleText (w,h,"#FFA500","Arial","bold 15px","#FFFFFF","改行文字を入れて描く");
		略す
	}

	略す

}

保存配列、assetsに格納している。この辺の設計は自由である。


● 虹色TEXT付きcanvasを作る

文字を分解して再度並べ替えています。文字間隔を自由に出来るようにしていますので応用性があろうかと思います。
尚、中央是正は正確では有りません(1-2ドットの狂いあり)。文字間隔補正0は標準、重なり順は変更出来ません。

色々な例を列挙していますので、改造して楽しんでください。


//虹色TEXT付きcanvasを作る3
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createTextCanvas3 (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;
	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;
		rainbowColor=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		ctx.fillStyle=rainbowColor;

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

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

		tw =tw+tm-spc*-1;

	}

	return canvas;
}

※ Text陰影の注意点

Text陰影を付ける場合は、描画 fillText()などの前に「陰影処理」を実行してください。
スクリプトに「背景がナイト有効にならない」と記述しましたが、「陰影処理」実行のタイミングの間違いでした。訂正します。尚、「HTML5 Canvas仕様」で陰影はTextのみに有効です。2014/02/24、加筆)


関数set_shadow()使用の例

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

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

//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]);//ダイジョウブ
	ctx.shadowOffsetX=0;
	ctx.shadowOffsetY=0;
	ctx.shadowBlur=3;
}

「HTML5 Canvas仕様」は戸惑う場合がある。16進カラーで使用できるようにした。


● 改行ありの複数行タイプ

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

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


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



//TEXT付きcanvasを作る/簡易改行用
//幅、高さ、色、文字種、サイズ、文字色、ストリング
function createMultipleText (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;
	ctx.fillRect(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;
	textList.forEach(function(text,i){
    		ctx.fillText(text,5,5+lineHeight*i,w*0.9);
  	});

	return canvas;
}

#16進色のRgb変換

Rgb変換が、ダサい何とか成らんかナ、誰か考えてください。よろしく!
createjs.Graphics.getRGB()の中にいれて使う、少々面倒ですから注意下さい。(透明度の指定も可能)


function createTextCanvas5 (w,h,c,font,fsize,fcolor,text) {

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

	略す

	//旨くしないとエラーになるGraphics.getRGB利用した面倒
	//gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2],1));
	gradient.addColorStop(0.0,createjs.Graphics.getRGB(rgbArr[0],rgbArr[1],rgbArr[2]));//ダイジョウブ

	略す

	return canvas;
}

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

//変換は配列で返すナントカ使える
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;
}

各種設定

JSの先頭をご覧下さい。


案内用TEXT表示

画面の推移毎に状態など表示しています、削除下さい。(または、textUse=false で表示しない)


通常のCreateJSテキストを分解する

通常のCreateJSテキストを分解する事も可能であるが、下図の様に背景は無い、CSS等も機能しないので成り行き任せである。HTML5 Canvasは複数行のテキスト表示には対応していないのであるから以下仕方がない。
処理方法など記載していますが、使用していません。実際表示は「デモ」で確認できます。


下図の様に表示するのが精一杯である。


 

1. 適当な所で改行文字 ¥n を挿入する。(ブラウザ毎に確認)
2. Bold 指定 は行間に隙間が出来る(FontSize有効)。
3. Bold 指定のないものは ¥n¥n で隙間を作る。隙間が大きい。(FontSize有効)。
4. line-heightで隙を作れるが、数値は無効である(FontSize無効)
5. こりゃ大変だ!よって、上記の様に、Canvas要素で作っている。
6. 自由に作れレイアウトできる状態ではない!


● Textを、BitmapData に変換する。

予め配列に収容しておき、一旦 cache() してから変換する。
(DisplayObject継承のものは事前にcacheしなければならない)


配列にテキストインスタンスを保存

assets[0]=new createjs.Text("複数テキスト改行文字で区切る","bold 15px Arial","#FFFFFF");

---------------------------------------------------------------------------
textBox_noは番号

//CreateJS Textクラス
assets[textBox_no].cache(0,0,200,60);
bitmapdata=createjs.BitmapData.getBitmapData(assets[textBox_no]);

draw()でも可能であるが、構造などにより1回目は正常に処理して、2回目以降はエラーで処理出来ない場合などが発生することがある。工夫をすれば回避できるが面倒なので、上記のgetBitmapDataでの変換方法が良い

「エラー」状況などは「ページ最終段」で少々言及している。



bitmapdata=draw(Textクラスのインスタンス);

使用画像

背景用画像、640x300、必要な場合。


Firefoxとwelcome画像について[重要]

背景用welcome画像読み込めず、パーティクル消滅事件発生。

通常は下記のような画像読み込みでは、Firefoxで画像関連の重大「エラー」は起こらないはずです。
画像読み込みが出来ず、意に反して重大「エラー?」が起こった。(パーティクルが消滅した、魚魚魚!)


welcome画像表示
welcomeImage=new createjs.Bitmap('/main/images/yakei.png');
この形式では画像表示をしないだけでエラーは起きないはずだ。

1. Firefoxの画像処理は不具合が多いと個人的に思っています。
2. Firefoxでは、画像取得失敗で重大「エラー」になる可能性がある。(他のブラウザでは画像を表示しないだけでエラーにならない場合が多い)
3. 原因として、画像表示及び、パーティクル処理に負荷が掛かり過ぎて要る事が考察されます。
4. 今回は、FirefoxにおけるBitmapData画面との相乗的な不具合のようです。


修正前


//welcome画像層画像表示/必要なら下に画像を表示
welcomeImage=new createjs.Bitmap('/main/images/welcome_back4.jpg');
stage.addChild(welcomeImage);
//表示
welcomeImage.visible=true;
-------------------------------------------------------------------

非表示なら問題は起きない
welcomeImage.visible=false;

原因など、Firefoxの動作から予測すると

1. 画像Load処理の間に、BitmapData画面が先行して形成された?
2. 画像Loadエラーのために、実態のないBitmap()がステージ最上層に行き場を失って覆っている?
(このような現象はIE9にも見られる)
3. Firefoxの処理が遅い、且つおかしいのが最大の問題である。


よって、以下の様な「エラー」を回避する処理をして下さい。

1. welcome画像表示部分を削除する。
2. 画像表示階層を確保して、Loaderなどを介して確実に取得できた画像を表示する。
3. 画像取得の出来ない場合は「代替画像」をキャンバス要素で作りそれを表示する。


BitmapData画面との相乗的な不具合の様なので、よって「表示エラー」回避のために次のようにした。これで画像取得に失敗しても正常に動作表示する。
● 先に、空Bitmap()をaddChild()して重なり順を確保。
● 画像をLoad出来たら、Bitmap()に流し込む。


修正後


//welcome画像層画像表示/必要なら下に画像を表示
//画像層確保/Firefox対策
welcomeImage=new createjs.Bitmap();
stage.addChild(welcomeImage);
//表示
welcomeImage.visible=true;

//簡易Loader/Firefox対策
var img=new Image();
img.src="/main/images/yakei.png";
img.onload=function() {
	//Bitmap流し込み
	welcomeImage.image=new createjs.Bitmap(img).image;
}

タマタマ、別環境で確認するのに画像を忘れたために起きて判った「新事実」です、Firefoxは要注意です。


▲[ 目次 ]


 

 

新規に空のBitmapData作成でエラーになるのを回避する


以下、少々繁雑ですが、興味のある方のみ、お読み下さい。


新規に空のBitmapDataを作成する

AS3で「透明BitmapData」をクリア出来ず、新規に作ったりなど障害があったのを思いながら「先のデモ」JSを作った。まだ触ったばかりでよく理解している訳ではない故やはり問題は起きた.....


空のBitmapData()を作成するはスコブル簡単ではあるが、構造によってはエラーの出る場合がある
当方は空のBitmap()を用意してあとで中身を挿入することが多い。
その為か当初はエラーが出て旨く、BitmapData処理が出来なかった..........


長くなるので、先に結論

ソース null での空のBitmapData作成でエラーになるならば...


エラーになる場合がある

var base=new createjs.BitmapData(null,100,100);
base.clearRect(0,0,100,100);

ソースに HTMLCanvasElement を入れるとエラーにならない
ソース null でエラーなら、HTMLCanvasElement でも入れればと言う発想である。


//HTMLCanvasElement
var sourceCanvas=document.createElement("canvas");
//ERROR回避のためにsourceCanvas挿入
var base=new createjs.BitmapData(sourceCanvas,100,100);
base.clearRect(0,0,100,100);

あるいは、

先にBitmapにBitmapDataを入れた表示構造を作っておく

「デモ」では下記の様に、最初から BitmapData を Bitmap 中に挿入している。

この方が、後で BitmapData のみ流し込めばよいから効率的であるし、エラーも出ない。


//overImage/BitmapData表示領域
overcontainer=new createjs.Container();
//最重要、BitmapDataは最初からなければならない
set_bmd=new createjs.BitmapData(null,canvasWidth,canvasHeight);
overImage=new createjs.Bitmap(set_bmd.canvas);
overcontainer.addChild(overImage);
stage.addChild(overcontainer);

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

ここで、BitmapData処理画面、set_bmd はグローバルである

必要な所で中をクリアしながら使いまわし
set_bmd.clearRect(0,0,canvasWidth,canvasHeight)

先にBitmapに BitmapData を入れた表示構造を作っておくと言うことです。


ステージ.addChild(ビットマップ(ビットマップデータ.canvas));

後で BitmapData を挿入しようと「空Bitmap」を配置すると処理が面倒である。
エラーで BitmapData を作れない場合もある?

上記の方法に辿り着くまで、エラーが出て悩み時間を要した。多少のクセはあるようです。


通常ワタシの場合、以下のような構造が多い。つまり、BitmapData操作ではエラーが出易い構造と言える。


//空のBitmapを配置する
overImage=new createjs.Bitmap();
stage.addChild(overImage);

1. 最初から BitmapData を Bitmap 中に挿入しての構造を取れない場合もある。
(処理の都合で、その都度、新規に作らねばナラ無いこともある)
2. 複数回、同じBitmapData処理をする場合、最初がOKであとで、エラーになる?
(Uncaught exception: TypeError: Cannot convert 'a' to object、など
キャッシュ、メモリーなどの問題でもなさそうである)
3. ソースとして、HTMLCanvasElement を指定できる(マニュアルに記載されている)。
ソース、null では無くエレメントを入れると問題なく処理できる。何故?


マニュアルでは


createjs.BitmapData ( [image=null]  [width=image.width]  [height=image.height] [fillColor=undefined] )

[image=null] HTMLImageElement | HTMLCanvasElement | HTMLVideoElement optional

この引数を指定すると指定したオブジェクトが描画されたBitmapDataが作成されます。
指定するオブジェクトは、読み込みが終わっている必要があります。
塗りのBitmapDataを作成したい場合は、nullを指定して下さい。

BitmapDataクラス製作者の kudoxさん が、あるブログで以下の様におっしゃっています。

BitmapData for EaselJSのコンストラクタの第4引数についてですが、
透明なBitmapDataを作成したい場合は第4引数を省略して下さい。


コンストラクタに第4引数が与えられた場合、内部でfillRectを実行していますが、 fillRectではアルファ値が0の場合、第2引数のcolorを0xRRGGBBと解釈するようにしています。


これはHTML5 canvasでは、例えば0x00FF0000をfillRectで描画しようとしても実際に描画されるのは0×00000000である
(アルファ値が0の場合、カラー値が無視される)ため、このようにしています。


この点についてはリファレンスに書いていなかったので、近々更新しておきます。
わかりにくくてすみません。


ソース部分 null で「エラー」の出る場合の「HTMLImageElement挿入」対処方である。


新規に HTMLCanvasElement を入れた BitmapData を作成する


● 1. HTMLCanvasElement を入れた BitmapData その1 (不透明形)

次ぎの場合は、0x00000000色を指定しても、0x000000色に成る、透明度は効かない。getPixel32()しても結果はgetPixel()の値である。
Canvas名は任意で何でも良い。


色の指定は、0x000000 など、透過形指定は出来ない。


//HTMLCanvasElement
var sourceCanvas=document.createElement("canvas");
//ERROR回避のためにsourceCanvas挿入
var base=new createjs.BitmapData(sourceCanvas,100,100,0x000000);

clearRect()でクリアすれば、透過色対応形になる (clearRect()は0x00000000でクリアする)


//HTMLCanvasElement
var sourceCanvas=document.createElement("canvas");
//ERROR回避のためにsourceCanvas挿入
var base=new createjs.BitmapData(sourceCanvas,100,100);
//BitmapData クリア
base.clearRect(0,0,100,100);

通常必要なのは 0x00000000 の「空BitmapData」である。


● 2. HTMLCanvasElement を入れた BitmapData その2 (透過色対応形)

次ぎの場合は、0x00000000色を指定出来、透明度も有効で有り、getPixel32()も正常である。
HTMLCanvasElementの中に 0x00000000 色のグラフイックを描画している。透明度のあるBitmapDataを作れる。
Canvas名は任意で何でも良い。



var sourceCanvas2=createColorCanvas (100,100,"rgba(0,0,0,0)");
//ERROR回避のためにsourceCanvas2挿入
var base=new createjs.BitmapData(sourceCanvas2,100,100,0x00000000);

//透明度50%の赤色になる
var base=new createjs.BitmapData(sourceCanvas2,100,100,0x88FF0000);

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

//色付きcanvasを作る
function createColorCanvas (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;
}

エラーで、空BitmapDataを作れない場合、上記の方法で作ると、エラーにならない。


● エラーにならないならば、ソース null の方が簡単なことは言うまでもない。


//透明度50%の赤色になる
var base=new createjs.BitmapData(null,100,100,0x88FF0000);

この辺の「家庭の事情」はワタシは知らないが、テストの結果判明した。
何故など質問されても、初心者のワタシには答えられないのでアシカラズ。


clearRect()でクリアすれば、同じ性質になる

上記2つとも、clearRect() でクリアすれば、同じ性質(透過色対応形)になる。次ぎのものと同等である。
clearRect()の実行は、0x00000000 色の 空BitmapData になる。


var base=new createjs.BitmapData(null,100,100);
//BitmapData クリア
base.clearRect(0,0,100,100);

この方法が最良か?正しいものか?、現在の私には判らない。他にも方法があるかも知れない?.......。
時間の経過と共に、情報が増えてくれば詳細は判明するかも知れない。


2回目からERRORになる例

表示が目的ではなく、処理目的のBitmapData変換する例である。
Textクラスで作ったテキストをBitmapData変換BitmapData画面にdrawして、指定の大きさ(100x100)のBitmapDataとして取り出す。1回目は正常で、繰り返すとエラーになる。


var bitmapdata;
----------------------------------------------------------
//TextクラスBitmapData処理、2回目からERRORになる
var text=new createjs.Text("WELCOME","16px Arial","#FFFFFF");
text.cache(0,0,100,100);
var base=new createjs.BitmapData(null,100,100);
base.clearRect(0,0,100,100);
base.draw(text);
bitmapdata=new createjs.BitmapData(base.canvas);

キャッシュ、メモリーなどに問題はなさそうで、ソースが null ではだめのようだ。


HTMLCanvasElementを入れるとエラーにならない、何故?


var sourceCanvas=document.createElement("canvas");
var base=new createjs.BitmapData(sourceCanvas,100,100);

理解に苦しむ。
原因などは宜しいのであって、ワタシはその場しのぎの「イイカゲン」「ゴマカシ」で取り繕うのが「モットー」である。


▲[ 目次 ]


 

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


同じ形式の画像分解パーティクルは下記に有ります、処理方法は同じです。

【参照】当方の記事: CreateJS BitmapData 1ピクセルに分解してパーティクル


BitmapDataクラスはまだ始めたばかりで、「イキオイ」で作っている。故にマチガイもあろうと思います。
一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

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


問題多発だ。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]