POPSブログ

CreateJS フォントをGraphicsクラスで描画する

317

  Category:  javascript2014/08/12 pops 

基本的に、現在CreateJSでフォントをGraphicsクラスで描画する事は出来ませんが InkscapeとInk2canvasでフォントをコンテキスト(ctx)の形式に変換してGraphicsクラスで描画する事は可能です。付随作業と多少の制約はありますがテストしてみます。

 

CreateJS フォントをGraphicsクラスで描画するテスト

InkscapeのフォントをInk2canvasでコンテキスト(ctx)の形式に変換して、少し工夫すればGraphicsクラスで描画することが可能です。手作業を伴うため字数の少ない場合に限ります。


 

DEMO


CreateJS フォントをGraphicsクラスで描画するデモ

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



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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>

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


HTML (HTML5)


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

JS

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


//日本語
//createJS101.js
//フォントをGraphicsクラスで描画するテスト用
//easeljs-0.7.1用

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

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

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=55;//暫定

//ロゴテキスト
var logostring="WELCOME";
//ロゴテキスト2
var logostring2="Merry Christmas";

//画像manifestリスト
var manifest=[
{src:"/main/images/textback01.jpg",id:"text"},
{src:"/main/images/textback02.jpg",id:"text"},
{src:"/main/images/textback03.jpg",id:"text"},
{src:"/main/images/sky_back2.jpg",id:"photo"},
{src:"/main/images/green.jpg",id:"photo"}
];

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

//ステージ
var stage;
//コンテナなど
var backrect;
var backImage;
var maskImage;
var imagemaskbox;
var maskcontainer;
var xmlcontainer;
var partsbox;//パーツコンテナ
var container;

//TEXT
var viewtext;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];

//読み込み画像URL保存容器
var assets=[];
var backphotos=[];
var loader;
var image_max;

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

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

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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	stage.enableMouseOver(20);

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

	//背景画像1
	backImage=new createjs.Bitmap();
	stage.addChild(backImage);
	backImage.visible=true;

	//imageMASKコンテナ使用
	imagemaskbox=new createjs.Container();
	stage.addChild(imagemaskbox);

	//svg
	backSvg=new createjs.Shape();
	stage.addChild(backSvg);

	//パーツコンテナ使用
	partsbox=new createjs.Container();
	stage.addChild(partsbox);

	//Text-Mask画像
	maskcontainer=new createjs.Container();
	backSvg=new createjs.Shape();
	maskImage=new createjs.Bitmap();
	maskcontainer.addChild(backSvg,maskImage);
	stage.addChild(maskcontainer);

	//簡易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);
	set_text("LOADING NOW!");

	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	stage.update();

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

	//調整
	setTimeout(function() {

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

	},1000);

}

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

	//Loader
	loader=new createjs.LoadQueue(false);

	//loader EventListener設定、この部分修正
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}
//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//エラー無しの画像をassets容器に保存
	//画像選別
	if (id == 'text') {
		//result値
		assets.push(event.result);
	}
	if (id == 'photo') {
		//result値
		backphotos.push(event.result);
	}

}
//全ての画像読み込み完了
function complete (event) {

	set_text("LOADING END!");
	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

	//背景画像表示
	backImage.image=new createjs.Bitmap(backphotos[1]).image;

	//画像があれば
	if (image_max) {
		setTimeout(function() {

			set_text("");
			
			//MAINに進む
			set_maintext();

		},1000);
	}

}

//MAIN
function set_maintext() {

	//-----MASK画像----------------------

	//MASK画像 MASK/GauFontMilkChoco 434x58
	//
	var maskShape=new createjs.Shape();
	maskShape.graphics.beginFill("#FFFFFF").drawCanvasSvgEx(0,0);
	maskShape.regX=434/2;
	maskShape.regY=58/2;
	maskShape.scaleX=3;
	maskShape.scaleY=3;
	maskShape.rotation=-20;
	maskShape.visible=false;//非表示

	//IMAGE
	var maskImage=new createjs.Bitmap(backphotos[0]);
	maskImage.regX=canvasWidth/2;
	maskImage.regY=canvasHeight/2;
	imagemaskbox.addChild(maskShape,maskImage);
	maskImage.mask=maskShape;
	imagemaskbox.x=canvasWidth/2;
	imagemaskbox.y=canvasHeight/2;

	//-----グラフイック文字--------------

	//通常グラフイック用/GauFontMilkChoco 434x58 OK
	backSvg.graphics.ss(1,1,1,1,false).s("#FFFFFF").drawCanvasSvgEx(0,0);
	backSvg.regX=434/2;
	backSvg.regY=58/2;
	backSvg.x=canvasWidth/2;
	backSvg.y=canvasHeight/2;
	backSvg.scaleX=1;
	backSvg.scaleY=1
	backSvg.rotation=0;
	backSvg.shadow=new createjs.Shadow("#000000",0,0,5);
	backSvg.visible=true;

	//-----グラフイック文字--------------

	//GauFontMilkChoco 434x58 OK
	var margin=-10;
	var m_width=0;
	var text_len=7;//文字数

	//個別に実行 OK
	for (var i=0; i < text_len; i++) {

		var partsSvg=new createjs.Shape();
		partsSvg.x +=i*margin;

		var img=backphotos[1];//葉
		var partsSvg=new createjs.Shape();
		partsSvg.x +=i*margin;
		var matrix=new createjs.Matrix2D();//修正済み
		matrix.translate(-i*margin,0);
		partsSvg.graphics.beginBitmapFill(img,"no-repeat",matrix).drawCanvasSvgEx3(0,0,i);//画像

		//partsSvg.graphics.ss(2).s("#FFFFFF").beginFill("#0BBDA2").drawCanvasSvgEx3(0,0,i);//ライン

		partsSvg.shadow=new createjs.Shadow("#000000",0,0,5);//陰影
		//パーツコンテナ収容
		partsbox.addChild(partsSvg);

	}

	//幅修正値
	m_width=margin*(text_len-1);

	partsbox.regX=(434+m_width)/2;
	partsbox.regY=58/2;
	partsbox.scaleX=1;
	partsbox.scaleY=1;
	partsbox.x=canvasWidth/2;
	partsbox.y=canvasHeight/2+80;
	partsbox.rotation=0;

	//-----一行テキスト文字--------------

	//MAINテキスト
	var img=assets[2];//画像
	//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
	var main_text=createMultiTextCanvas2(canvasWidth,50,"Bold 35px","Arial","#FF1493","#FFFFFF",2,"#000000",true,img,1,true,mainstring,true,false);

	maintextcontainer.x=canvasWidth/2;//中央補正
	maintextcontainer.addChild(main_text);

}

//画像修飾Multiテキストインスタンスを作る2
//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
function createMultiTextCanvas2(CanvasW,CanvasH,size,font,fcolor,lcolor,outline_w,scolor,shadow,img,imgalpha,imgshadow,str,base,line) {

	var fontdata=size + " " + font;

	//コンテナ
	var contna=new createjs.Container();

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,fcolor);
	//文字入れる
	t.text=str;
	t.name="base";
	//base原点中央
	t.textAlign="center";
	t.textBaseline="middle";
	if (shadow) {t.shadow=new createjs.Shadow(scolor,0,0,4);}//陰影
	//base表示
	if(!base) {t.visible=false;}

	//fill画像
	var canvas=document.createElement("canvas");
	canvas.width=CanvasW;
	canvas.height=CanvasH;
	var ctx=canvas.getContext("2d");

	//画像
	var pattern=ctx.createPattern(img,"repeat");
	ctx.fillStyle=pattern;
	ctx.font=fontdata;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	ctx.globalAlpha=imgalpha;

	if (imgshadow) {set_shadow (ctx,scolor,0,0,4);}//陰影
	//fill
	ctx.fillText(str,CanvasW/2,CanvasH/2);
	var img_txt=new createjs.Bitmap(canvas);
	img_txt.name="image";
	//原点中央
	img_txt.regX=CanvasW/2;
	img_txt.regY=CanvasH/2;

	//line
	var canvas=document.createElement("canvas");
	canvas.width=CanvasW;
	canvas.height=CanvasH;
	var ctx=canvas.getContext("2d");
	ctx.strokeStyle=lcolor;
	ctx.font=fontdata;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	ctx.lineJoin="miter";
	ctx.miterLimit=1;

	if (shadow) {set_shadow (ctx,scolor);}//陰影
	//stroke
	ctx.lineWidth=outline_w;
	ctx.strokeText(str,CanvasW/2,CanvasH/2);
	var line_txt=new createjs.Bitmap(canvas);
	line_txt.name="line";
	//原点中央
	line_txt.regX=CanvasW/2;
	line_txt.regY=CanvasH/2;

	//base表示
	if(!line) {line_txt.visible=false;}
	contna.addChild(t,img_txt,line_txt);

	//戻り
	return contna;
}

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

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

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

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

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

createjs.Graphics.prototype.drawCanvasSvgEx=function(x,y) {

	//GauFontMilkChoco 434x58
	this.moveTo(60.272949, 23.087402);
	this.bezierCurveTo(60.272888, 29.616238, 57.968691, 34.608421, 53.360352, 38.063965);
	this.bezierCurveTo(48.560009, 41.711441, 41.383747, 43.535170, 31.831543, 43.535156);
	this.bezierCurveTo(31.447721, 43.535170, 30.967986, 43.535170, 30.392334, 43.535156);
	this.lineTo(30.392334, 46.200439);
	this.bezierCurveTo(30.392303, 49.223885, 29.072113, 51.791753, 26.431763, 53.904053);
	this.bezierCurveTo(23.791357, 56.016358, 20.599099, 57.072510, 16.854980, 57.072510);
	this.bezierCurveTo(13.112291, 57.072510, 9.920765, 56.016358, 7.280395, 53.904053);
	this.bezierCurveTo(4.640009, 51.791753, 3.319820, 49.223885, 3.319824, 46.200439);
	this.lineTo(3.319824, 23.087402);
	this.bezierCurveTo(3.319820, 16.608439, 5.624017, 11.616989, 10.232422, 8.113037);
	this.bezierCurveTo(15.032699, 4.464164, 22.232399, 2.639703, 31.831543, 2.639648);
	this.bezierCurveTo(41.383747, 2.639703, 48.560009, 4.464164, 53.360352, 8.113037);
	this.bezierCurveTo(57.968691, 11.616989, 60.272888, 16.608439, 60.272949, 23.087402);
	this.closePath();
	this.moveTo(30.392334, 34.752686);
	this.bezierCurveTo(30.392303, 35.471945, 30.872038, 35.831564, 31.831543, 35.831543);
	this.bezierCurveTo(32.744107, 35.831564, 33.200405, 35.471945, 33.200439, 34.752686);
	this.lineTo(33.200439, 11.784668);
	this.bezierCurveTo(33.200405, 11.015671, 32.744107, 10.631150, 31.831543, 10.631104);
	this.bezierCurveTo(30.872038, 10.631150, 30.392303, 11.015671, 30.392334, 11.784668);
	this.closePath();

	this.moveTo(91.545654, 57.072510);
	this.bezierCurveTo(81.993384, 57.072510, 74.792952, 55.224611, 69.944336, 51.528809);
	this.bezierCurveTo(65.337395, 48.071786, 63.033931, 43.103774, 63.033936, 36.624756);
	this.lineTo(63.033936, 23.087402);
	this.bezierCurveTo(63.033931, 16.608439, 65.337395, 11.616989, 69.944336, 8.113037);
	this.bezierCurveTo(74.792952, 4.464164, 81.993384, 2.639703, 91.545654, 2.639648);
	this.bezierCurveTo(101.097860, 2.639703, 108.297560, 4.464164, 113.144780, 8.113037);
	this.bezierCurveTo(117.704770, 11.616989, 119.984800, 16.608439, 119.984860, 23.087402);
	this.lineTo(119.984860, 36.624756);
	this.bezierCurveTo(119.984800, 43.103774, 117.704770, 48.071786, 113.144780, 51.528809);
	this.bezierCurveTo(108.297560, 55.224611, 101.097860, 57.072510, 91.545654, 57.072510);
	this.closePath();
	this.moveTo(90.104248, 48.215332);
	this.bezierCurveTo(90.104216, 48.984383, 90.584684, 49.368904, 91.545654, 49.368896);
	this.bezierCurveTo(92.505093, 49.368904, 92.984829, 48.984383, 92.984863, 48.215332);
	this.lineTo(92.984863, 11.784668);
	this.bezierCurveTo(92.984829, 11.015671, 92.505093, 10.631150, 91.545654, 10.631104);
	this.bezierCurveTo(90.584684, 10.631150, 90.104216, 11.015671, 90.104248, 11.784668);
	this.closePath();

	this.moveTo(179.788570, 23.087402);
	this.bezierCurveTo(179.788510, 29.616238, 177.484320, 34.608421, 172.875980, 38.063965);
	this.bezierCurveTo(168.075630, 41.711441, 160.899370, 43.535170, 151.347170, 43.535156);
	this.bezierCurveTo(150.963350, 43.535170, 150.483610, 43.535170, 149.907960, 43.535156);
	this.lineTo(149.907960, 46.200439);
	this.bezierCurveTo(149.907930, 49.223885, 148.587740, 51.791753, 145.947390, 53.904053);
	this.bezierCurveTo(143.306980, 56.016358, 140.114720, 57.072510, 136.370610, 57.072510);
	this.bezierCurveTo(132.627920, 57.072510, 129.436390, 56.016358, 126.796020, 53.904053);
	this.bezierCurveTo(124.155630, 51.791753, 122.835440, 49.223885, 122.835450, 46.200439);
	this.lineTo(122.835450, 23.087402);
	this.bezierCurveTo(122.835440, 16.608439, 125.139640, 11.616989, 129.748050, 8.113037);
	this.bezierCurveTo(134.548320, 4.464164, 141.748020, 2.639703, 151.347170, 2.639648);
	this.bezierCurveTo(160.899370, 2.639703, 168.075630, 4.464164, 172.875980, 8.113037);
	this.bezierCurveTo(177.484320, 11.616989, 179.788510, 16.608439, 179.788570, 23.087402);
	this.closePath();
	this.moveTo(149.907960, 34.752686);
	this.bezierCurveTo(149.907930, 35.471945, 150.387660, 35.831564, 151.347170, 35.831543);
	this.bezierCurveTo(152.259730, 35.831564, 152.716030, 35.471945, 152.716060, 34.752686);
	this.lineTo(152.716060, 11.784668);
	this.bezierCurveTo(152.716030, 11.015671, 152.259730, 10.631150, 151.347170, 10.631104);
	this.bezierCurveTo(150.387660, 10.631150, 149.907930, 11.015671, 149.907960, 11.784668);
	this.closePath();

	this.moveTo(209.909910, 21.863525);
	this.bezierCurveTo(208.948940, 21.863561, 208.468480, 21.479772, 208.468510, 20.712158);
	this.lineTo(208.468510, 19.776123);
	this.bezierCurveTo(208.468480, 19.008583, 208.948940, 18.624794, 209.909910, 18.624756);
	this.lineTo(227.837400, 18.624756);
	this.bezierCurveTo(230.573680, 18.624794, 232.925850, 17.844766, 234.893920, 16.284668);
	this.bezierCurveTo(236.861880, 14.724652, 237.845890, 12.840132, 237.845950, 10.631104);
	this.bezierCurveTo(237.845890, 8.423633, 236.861880, 6.539845, 234.893920, 4.979736);
	this.bezierCurveTo(232.925850, 3.419731, 230.573680, 2.639703, 227.837400, 2.639648);
	this.lineTo(209.909910, 2.639648);
	this.bezierCurveTo(200.020730, 2.639703, 192.796130, 4.067924, 188.236080, 6.924316);
	this.bezierCurveTo(183.676020, 9.780809, 181.395990, 14.232465, 181.396000, 20.279297);
	this.bezierCurveTo(181.395990, 26.279328, 183.676020, 30.707546, 188.236080, 33.563965);
	this.bezierCurveTo(192.796130, 36.420431, 200.020730, 37.848652, 209.909910, 37.848633);
	this.bezierCurveTo(210.821010, 37.848652, 211.276580, 38.232441, 211.276610, 39.000000);
	this.lineTo(211.276610, 39.936035);
	this.bezierCurveTo(211.276580, 40.703630, 210.821010, 41.087418, 209.909910, 41.087402);
	this.lineTo(191.909910, 41.087402);
	this.bezierCurveTo(189.173570, 41.087418, 186.821400, 41.867447, 184.853390, 43.427490);
	this.bezierCurveTo(182.885370, 44.987561, 181.901360, 46.872080, 181.901370, 49.081055);
	this.bezierCurveTo(181.901360, 51.288580, 182.885370, 53.172367, 184.853390, 54.732422);
	this.bezierCurveTo(186.821400, 56.292481, 189.173570, 57.072510, 191.909910, 57.072510);
	this.lineTo(209.909910, 57.072510);
	this.bezierCurveTo(219.749230, 57.072510, 226.948930, 55.644288, 231.509030, 52.787842);
	this.bezierCurveTo(236.069030, 49.931404, 238.349060, 45.479748, 238.349120, 39.432861);
	this.bezierCurveTo(238.349060, 33.384545, 236.069030, 28.944242, 231.509030, 26.111938);
	this.bezierCurveTo(226.948930, 23.279697, 219.749230, 21.863561, 209.909910, 21.863525);
	this.closePath();

	this.moveTo(276.459720, 2.639648);
	this.bezierCurveTo(273.578330, 2.639703, 271.129850, 3.455620, 269.114260, 5.087402);
	this.bezierCurveTo(267.098600, 6.719289, 266.090790, 8.663134, 266.090820, 10.918945);
	this.lineTo(266.090820, 47.927490);
	this.bezierCurveTo(266.090790, 48.696542, 265.611060, 49.081063, 264.651610, 49.081055);
	this.bezierCurveTo(263.690650, 49.081063, 263.210180, 48.696542, 263.210210, 47.927490);
	this.lineTo(263.210210, 10.918945);
	this.bezierCurveTo(263.210180, 8.663134, 262.202370, 6.719289, 260.186770, 5.087402);
	this.bezierCurveTo(258.171120, 3.455620, 255.723370, 2.639703, 252.843510, 2.639648);
	this.bezierCurveTo(250.010490, 2.639703, 247.574090, 3.455620, 245.534300, 5.087402);
	this.bezierCurveTo(243.494500, 6.719289, 242.474600, 8.663134, 242.474610, 10.918945);
	this.lineTo(242.474610, 38.279297);
	this.bezierCurveTo(242.474600, 44.327649, 244.418450, 48.971932, 248.306150, 52.212158);
	this.bezierCurveTo(252.193830, 55.452394, 257.642310, 57.072510, 264.651610, 57.072510);
	this.bezierCurveTo(268.731170, 57.072510, 272.667200, 55.896241, 276.459720, 53.543701);
	this.bezierCurveTo(280.202350, 55.896241, 284.114210, 57.072510, 288.195310, 57.072510);
	this.bezierCurveTo(295.203070, 57.072510, 300.650820, 55.452394, 304.538570, 52.212158);
	this.bezierCurveTo(308.426200, 48.971932, 310.370040, 44.327649, 310.370120, 38.279297);
	this.lineTo(310.370120, 10.918945);
	this.bezierCurveTo(310.370040, 8.663134, 309.350150, 6.719289, 307.310420, 5.087402);
	this.bezierCurveTo(305.270560, 3.455620, 302.834900, 2.639703, 300.003420, 2.639648);
	this.bezierCurveTo(297.123480, 2.639703, 294.675360, 3.455620, 292.659060, 5.087402);
	this.bezierCurveTo(290.642650, 6.719289, 289.634470, 8.663134, 289.634520, 10.918945);
	this.lineTo(289.634520, 47.927490);
	this.bezierCurveTo(289.634470, 48.696542, 289.154730, 49.081063, 288.195310, 49.081055);
	this.bezierCurveTo(287.234320, 49.081063, 286.753860, 48.696542, 286.753910, 47.927490);
	this.lineTo(286.753910, 10.918945);
	this.bezierCurveTo(286.753860, 8.663134, 285.746050, 6.719289, 283.730470, 5.087402);
	this.bezierCurveTo(281.714800, 3.455620, 279.291220, 2.639703, 276.459720, 2.639648);
	this.closePath();

	this.moveTo(342.316890, 37.848633);
	this.lineTo(360.316890, 37.848633);
	this.bezierCurveTo(363.053170, 37.848652, 365.405340, 37.068623, 367.373410, 35.508545);
	this.bezierCurveTo(369.341370, 33.948509, 370.325380, 32.063990, 370.325440, 29.854980);
	this.bezierCurveTo(370.325380, 27.647490, 369.341370, 25.763703, 367.373410, 24.203613);
	this.bezierCurveTo(365.405340, 22.643589, 363.053170, 21.863561, 360.316890, 21.863525);
	this.lineTo(342.316890, 21.863525);
	this.bezierCurveTo(341.404260, 21.863561, 340.947970, 21.479772, 340.948000, 20.712158);
	this.lineTo(340.948000, 19.776123);
	this.bezierCurveTo(340.947970, 19.008583, 341.404260, 18.624794, 342.316890, 18.624756);
	this.lineTo(360.316890, 18.624756);
	this.bezierCurveTo(363.053170, 18.624794, 365.405340, 17.844766, 367.373410, 16.284668);
	this.bezierCurveTo(369.341370, 14.724652, 370.325380, 12.840132, 370.325440, 10.631104);
	this.bezierCurveTo(370.325380, 8.423633, 369.341370, 6.539845, 367.373410, 4.979736);
	this.bezierCurveTo(365.405340, 3.419731, 363.053170, 2.639703, 360.316890, 2.639648);
	this.lineTo(342.316890, 2.639648);
	this.bezierCurveTo(332.764620, 2.639703, 325.588360, 4.464164, 320.788090, 8.113037);
	this.bezierCurveTo(316.181150, 11.616989, 313.877680, 16.608439, 313.877690, 23.087402);
	this.lineTo(313.877690, 36.624756);
	this.bezierCurveTo(313.877680, 43.103774, 316.181150, 48.071786, 320.788090, 51.528809);
	this.bezierCurveTo(325.588360, 55.224611, 332.764620, 57.072510, 342.316890, 57.072510);
	this.lineTo(360.316890, 57.072510);
	this.bezierCurveTo(363.053170, 57.072510, 365.405340, 56.292481, 367.373410, 54.732422);
	this.bezierCurveTo(369.341370, 53.172367, 370.325380, 51.288580, 370.325440, 49.081055);
	this.bezierCurveTo(370.325380, 46.872080, 369.341370, 44.987561, 367.373410, 43.427490);
	this.bezierCurveTo(365.405340, 41.867447, 363.053170, 41.087418, 360.316890, 41.087402);
	this.lineTo(342.316890, 41.087402);
	this.bezierCurveTo(341.404260, 41.087418, 340.947970, 40.703630, 340.948000, 39.936035);
	this.lineTo(340.948000, 39.000000);
	this.bezierCurveTo(340.947970, 38.232441, 341.404260, 37.848652, 342.316890, 37.848633);
	this.closePath();

	this.moveTo(430.652100, 41.447754);
	this.bezierCurveTo(430.652040, 46.728526, 428.035830, 50.688727, 422.803470, 53.328369);
	this.bezierCurveTo(418.003120, 55.824464, 411.138870, 57.072510, 402.210690, 57.072510);
	this.lineTo(382.268310, 57.072510);
	this.bezierCurveTo(379.915760, 57.072510, 377.899400, 56.400513, 376.219240, 55.056519);
	this.bezierCurveTo(374.539060, 53.712528, 373.698970, 52.104497, 373.698970, 50.232422);
	this.lineTo(373.698970, 9.479736);
	this.bezierCurveTo(373.698970, 7.607715, 374.539060, 5.999685, 376.219240, 4.655640);
	this.bezierCurveTo(377.899400, 3.311699, 379.915760, 2.639703, 382.268310, 2.639648);
	this.lineTo(402.210690, 2.639648);
	this.bezierCurveTo(411.138870, 2.639703, 418.003120, 3.863578, 422.803470, 6.311279);
	this.bezierCurveTo(428.035830, 8.952441, 430.652040, 12.936812, 430.652100, 18.264404);
	this.bezierCurveTo(430.652040, 23.351840, 428.251890, 27.215362, 423.451660, 29.854980);
	this.bezierCurveTo(428.251890, 32.496118, 430.652040, 36.360372, 430.652100, 41.447754);
	this.closePath();
	this.moveTo(403.652100, 11.784668);
	this.bezierCurveTo(403.652060, 11.015671, 403.171600, 10.631150, 402.210690, 10.631104);
	this.bezierCurveTo(401.251190, 10.631150, 400.771450, 11.015671, 400.771480, 11.784668);
	this.lineTo(400.771480, 25.031982);
	this.bezierCurveTo(400.771450, 25.752717, 401.251190, 26.113068, 402.210690, 26.113037);
	this.bezierCurveTo(403.171600, 26.113068, 403.652060, 25.752717, 403.652100, 25.031982);
	this.closePath();
	this.moveTo(403.652100, 34.968018);
	this.bezierCurveTo(403.652060, 34.200462, 403.171600, 33.816674, 402.210690, 33.816650);
	this.bezierCurveTo(401.251190, 33.816674, 400.771450, 34.200462, 400.771480, 34.968018);
	this.lineTo(400.771480, 48.215332);
	this.bezierCurveTo(400.771450, 48.984383, 401.251190, 49.368904, 402.210690, 49.368896);
	this.bezierCurveTo(403.171600, 49.368904, 403.652060, 48.984383, 403.652100, 48.215332);
	this.closePath();

}

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

//個別に実行
createjs.Graphics.prototype.drawCanvasSvgEx3=function(x,y,n) {

  //GauFontMilkChoco 434x58
  if(n == 0) {

	this.moveTo(60.272949, 23.087402);
	this.bezierCurveTo(60.272888, 29.616238, 57.968691, 34.608421, 53.360352, 38.063965);
	this.bezierCurveTo(48.560009, 41.711441, 41.383747, 43.535170, 31.831543, 43.535156);
	this.bezierCurveTo(31.447721, 43.535170, 30.967986, 43.535170, 30.392334, 43.535156);
	this.lineTo(30.392334, 46.200439);
	this.bezierCurveTo(30.392303, 49.223885, 29.072113, 51.791753, 26.431763, 53.904053);
	this.bezierCurveTo(23.791357, 56.016358, 20.599099, 57.072510, 16.854980, 57.072510);
	this.bezierCurveTo(13.112291, 57.072510, 9.920765, 56.016358, 7.280395, 53.904053);
	this.bezierCurveTo(4.640009, 51.791753, 3.319820, 49.223885, 3.319824, 46.200439);
	this.lineTo(3.319824, 23.087402);
	this.bezierCurveTo(3.319820, 16.608439, 5.624017, 11.616989, 10.232422, 8.113037);
	this.bezierCurveTo(15.032699, 4.464164, 22.232399, 2.639703, 31.831543, 2.639648);
	this.bezierCurveTo(41.383747, 2.639703, 48.560009, 4.464164, 53.360352, 8.113037);
	this.bezierCurveTo(57.968691, 11.616989, 60.272888, 16.608439, 60.272949, 23.087402);
	this.closePath();
	this.moveTo(30.392334, 34.752686);
	this.bezierCurveTo(30.392303, 35.471945, 30.872038, 35.831564, 31.831543, 35.831543);
	this.bezierCurveTo(32.744107, 35.831564, 33.200405, 35.471945, 33.200439, 34.752686);
	this.lineTo(33.200439, 11.784668);
	this.bezierCurveTo(33.200405, 11.015671, 32.744107, 10.631150, 31.831543, 10.631104);
	this.bezierCurveTo(30.872038, 10.631150, 30.392303, 11.015671, 30.392334, 11.784668);
	this.closePath();
  }
  if(n == 1) {
	this.moveTo(91.545654, 57.072510);
	this.bezierCurveTo(81.993384, 57.072510, 74.792952, 55.224611, 69.944336, 51.528809);
	this.bezierCurveTo(65.337395, 48.071786, 63.033931, 43.103774, 63.033936, 36.624756);
	this.lineTo(63.033936, 23.087402);
	this.bezierCurveTo(63.033931, 16.608439, 65.337395, 11.616989, 69.944336, 8.113037);
	this.bezierCurveTo(74.792952, 4.464164, 81.993384, 2.639703, 91.545654, 2.639648);
	this.bezierCurveTo(101.097860, 2.639703, 108.297560, 4.464164, 113.144780, 8.113037);
	this.bezierCurveTo(117.704770, 11.616989, 119.984800, 16.608439, 119.984860, 23.087402);
	this.lineTo(119.984860, 36.624756);
	this.bezierCurveTo(119.984800, 43.103774, 117.704770, 48.071786, 113.144780, 51.528809);
	this.bezierCurveTo(108.297560, 55.224611, 101.097860, 57.072510, 91.545654, 57.072510);
	this.closePath();
	this.moveTo(90.104248, 48.215332);
	this.bezierCurveTo(90.104216, 48.984383, 90.584684, 49.368904, 91.545654, 49.368896);
	this.bezierCurveTo(92.505093, 49.368904, 92.984829, 48.984383, 92.984863, 48.215332);
	this.lineTo(92.984863, 11.784668);
	this.bezierCurveTo(92.984829, 11.015671, 92.505093, 10.631150, 91.545654, 10.631104);
	this.bezierCurveTo(90.584684, 10.631150, 90.104216, 11.015671, 90.104248, 11.784668);
	this.closePath();
  }
  if(n == 2) {
	this.moveTo(179.788570, 23.087402);
	this.bezierCurveTo(179.788510, 29.616238, 177.484320, 34.608421, 172.875980, 38.063965);
	this.bezierCurveTo(168.075630, 41.711441, 160.899370, 43.535170, 151.347170, 43.535156);
	this.bezierCurveTo(150.963350, 43.535170, 150.483610, 43.535170, 149.907960, 43.535156);
	this.lineTo(149.907960, 46.200439);
	this.bezierCurveTo(149.907930, 49.223885, 148.587740, 51.791753, 145.947390, 53.904053);
	this.bezierCurveTo(143.306980, 56.016358, 140.114720, 57.072510, 136.370610, 57.072510);
	this.bezierCurveTo(132.627920, 57.072510, 129.436390, 56.016358, 126.796020, 53.904053);
	this.bezierCurveTo(124.155630, 51.791753, 122.835440, 49.223885, 122.835450, 46.200439);
	this.lineTo(122.835450, 23.087402);
	this.bezierCurveTo(122.835440, 16.608439, 125.139640, 11.616989, 129.748050, 8.113037);
	this.bezierCurveTo(134.548320, 4.464164, 141.748020, 2.639703, 151.347170, 2.639648);
	this.bezierCurveTo(160.899370, 2.639703, 168.075630, 4.464164, 172.875980, 8.113037);
	this.bezierCurveTo(177.484320, 11.616989, 179.788510, 16.608439, 179.788570, 23.087402);
	this.closePath();
	this.moveTo(149.907960, 34.752686);
	this.bezierCurveTo(149.907930, 35.471945, 150.387660, 35.831564, 151.347170, 35.831543);
	this.bezierCurveTo(152.259730, 35.831564, 152.716030, 35.471945, 152.716060, 34.752686);
	this.lineTo(152.716060, 11.784668);
	this.bezierCurveTo(152.716030, 11.015671, 152.259730, 10.631150, 151.347170, 10.631104);
	this.bezierCurveTo(150.387660, 10.631150, 149.907930, 11.015671, 149.907960, 11.784668);
	this.closePath();
  }
  if(n == 3) {
	this.moveTo(209.909910, 21.863525);
	this.bezierCurveTo(208.948940, 21.863561, 208.468480, 21.479772, 208.468510, 20.712158);
	this.lineTo(208.468510, 19.776123);
	this.bezierCurveTo(208.468480, 19.008583, 208.948940, 18.624794, 209.909910, 18.624756);
	this.lineTo(227.837400, 18.624756);
	this.bezierCurveTo(230.573680, 18.624794, 232.925850, 17.844766, 234.893920, 16.284668);
	this.bezierCurveTo(236.861880, 14.724652, 237.845890, 12.840132, 237.845950, 10.631104);
	this.bezierCurveTo(237.845890, 8.423633, 236.861880, 6.539845, 234.893920, 4.979736);
	this.bezierCurveTo(232.925850, 3.419731, 230.573680, 2.639703, 227.837400, 2.639648);
	this.lineTo(209.909910, 2.639648);
	this.bezierCurveTo(200.020730, 2.639703, 192.796130, 4.067924, 188.236080, 6.924316);
	this.bezierCurveTo(183.676020, 9.780809, 181.395990, 14.232465, 181.396000, 20.279297);
	this.bezierCurveTo(181.395990, 26.279328, 183.676020, 30.707546, 188.236080, 33.563965);
	this.bezierCurveTo(192.796130, 36.420431, 200.020730, 37.848652, 209.909910, 37.848633);
	this.bezierCurveTo(210.821010, 37.848652, 211.276580, 38.232441, 211.276610, 39.000000);
	this.lineTo(211.276610, 39.936035);
	this.bezierCurveTo(211.276580, 40.703630, 210.821010, 41.087418, 209.909910, 41.087402);
	this.lineTo(191.909910, 41.087402);
	this.bezierCurveTo(189.173570, 41.087418, 186.821400, 41.867447, 184.853390, 43.427490);
	this.bezierCurveTo(182.885370, 44.987561, 181.901360, 46.872080, 181.901370, 49.081055);
	this.bezierCurveTo(181.901360, 51.288580, 182.885370, 53.172367, 184.853390, 54.732422);
	this.bezierCurveTo(186.821400, 56.292481, 189.173570, 57.072510, 191.909910, 57.072510);
	this.lineTo(209.909910, 57.072510);
	this.bezierCurveTo(219.749230, 57.072510, 226.948930, 55.644288, 231.509030, 52.787842);
	this.bezierCurveTo(236.069030, 49.931404, 238.349060, 45.479748, 238.349120, 39.432861);
	this.bezierCurveTo(238.349060, 33.384545, 236.069030, 28.944242, 231.509030, 26.111938);
	this.bezierCurveTo(226.948930, 23.279697, 219.749230, 21.863561, 209.909910, 21.863525);
	this.closePath();
  }
  if(n == 4) {
	this.moveTo(276.459720, 2.639648);
	this.bezierCurveTo(273.578330, 2.639703, 271.129850, 3.455620, 269.114260, 5.087402);
	this.bezierCurveTo(267.098600, 6.719289, 266.090790, 8.663134, 266.090820, 10.918945);
	this.lineTo(266.090820, 47.927490);
	this.bezierCurveTo(266.090790, 48.696542, 265.611060, 49.081063, 264.651610, 49.081055);
	this.bezierCurveTo(263.690650, 49.081063, 263.210180, 48.696542, 263.210210, 47.927490);
	this.lineTo(263.210210, 10.918945);
	this.bezierCurveTo(263.210180, 8.663134, 262.202370, 6.719289, 260.186770, 5.087402);
	this.bezierCurveTo(258.171120, 3.455620, 255.723370, 2.639703, 252.843510, 2.639648);
	this.bezierCurveTo(250.010490, 2.639703, 247.574090, 3.455620, 245.534300, 5.087402);
	this.bezierCurveTo(243.494500, 6.719289, 242.474600, 8.663134, 242.474610, 10.918945);
	this.lineTo(242.474610, 38.279297);
	this.bezierCurveTo(242.474600, 44.327649, 244.418450, 48.971932, 248.306150, 52.212158);
	this.bezierCurveTo(252.193830, 55.452394, 257.642310, 57.072510, 264.651610, 57.072510);
	this.bezierCurveTo(268.731170, 57.072510, 272.667200, 55.896241, 276.459720, 53.543701);
	this.bezierCurveTo(280.202350, 55.896241, 284.114210, 57.072510, 288.195310, 57.072510);
	this.bezierCurveTo(295.203070, 57.072510, 300.650820, 55.452394, 304.538570, 52.212158);
	this.bezierCurveTo(308.426200, 48.971932, 310.370040, 44.327649, 310.370120, 38.279297);
	this.lineTo(310.370120, 10.918945);
	this.bezierCurveTo(310.370040, 8.663134, 309.350150, 6.719289, 307.310420, 5.087402);
	this.bezierCurveTo(305.270560, 3.455620, 302.834900, 2.639703, 300.003420, 2.639648);
	this.bezierCurveTo(297.123480, 2.639703, 294.675360, 3.455620, 292.659060, 5.087402);
	this.bezierCurveTo(290.642650, 6.719289, 289.634470, 8.663134, 289.634520, 10.918945);
	this.lineTo(289.634520, 47.927490);
	this.bezierCurveTo(289.634470, 48.696542, 289.154730, 49.081063, 288.195310, 49.081055);
	this.bezierCurveTo(287.234320, 49.081063, 286.753860, 48.696542, 286.753910, 47.927490);
	this.lineTo(286.753910, 10.918945);
	this.bezierCurveTo(286.753860, 8.663134, 285.746050, 6.719289, 283.730470, 5.087402);
	this.bezierCurveTo(281.714800, 3.455620, 279.291220, 2.639703, 276.459720, 2.639648);
	this.closePath();
  }
  if(n == 5) {
	this.moveTo(342.316890, 37.848633);
	this.lineTo(360.316890, 37.848633);
	this.bezierCurveTo(363.053170, 37.848652, 365.405340, 37.068623, 367.373410, 35.508545);
	this.bezierCurveTo(369.341370, 33.948509, 370.325380, 32.063990, 370.325440, 29.854980);
	this.bezierCurveTo(370.325380, 27.647490, 369.341370, 25.763703, 367.373410, 24.203613);
	this.bezierCurveTo(365.405340, 22.643589, 363.053170, 21.863561, 360.316890, 21.863525);
	this.lineTo(342.316890, 21.863525);
	this.bezierCurveTo(341.404260, 21.863561, 340.947970, 21.479772, 340.948000, 20.712158);
	this.lineTo(340.948000, 19.776123);
	this.bezierCurveTo(340.947970, 19.008583, 341.404260, 18.624794, 342.316890, 18.624756);
	this.lineTo(360.316890, 18.624756);
	this.bezierCurveTo(363.053170, 18.624794, 365.405340, 17.844766, 367.373410, 16.284668);
	this.bezierCurveTo(369.341370, 14.724652, 370.325380, 12.840132, 370.325440, 10.631104);
	this.bezierCurveTo(370.325380, 8.423633, 369.341370, 6.539845, 367.373410, 4.979736);
	this.bezierCurveTo(365.405340, 3.419731, 363.053170, 2.639703, 360.316890, 2.639648);
	this.lineTo(342.316890, 2.639648);
	this.bezierCurveTo(332.764620, 2.639703, 325.588360, 4.464164, 320.788090, 8.113037);
	this.bezierCurveTo(316.181150, 11.616989, 313.877680, 16.608439, 313.877690, 23.087402);
	this.lineTo(313.877690, 36.624756);
	this.bezierCurveTo(313.877680, 43.103774, 316.181150, 48.071786, 320.788090, 51.528809);
	this.bezierCurveTo(325.588360, 55.224611, 332.764620, 57.072510, 342.316890, 57.072510);
	this.lineTo(360.316890, 57.072510);
	this.bezierCurveTo(363.053170, 57.072510, 365.405340, 56.292481, 367.373410, 54.732422);
	this.bezierCurveTo(369.341370, 53.172367, 370.325380, 51.288580, 370.325440, 49.081055);
	this.bezierCurveTo(370.325380, 46.872080, 369.341370, 44.987561, 367.373410, 43.427490);
	this.bezierCurveTo(365.405340, 41.867447, 363.053170, 41.087418, 360.316890, 41.087402);
	this.lineTo(342.316890, 41.087402);
	this.bezierCurveTo(341.404260, 41.087418, 340.947970, 40.703630, 340.948000, 39.936035);
	this.lineTo(340.948000, 39.000000);
	this.bezierCurveTo(340.947970, 38.232441, 341.404260, 37.848652, 342.316890, 37.848633);
	this.closePath();
  }
  if(n == 6) {
	this.moveTo(430.652100, 41.447754);
	this.bezierCurveTo(430.652040, 46.728526, 428.035830, 50.688727, 422.803470, 53.328369);
	this.bezierCurveTo(418.003120, 55.824464, 411.138870, 57.072510, 402.210690, 57.072510);
	this.lineTo(382.268310, 57.072510);
	this.bezierCurveTo(379.915760, 57.072510, 377.899400, 56.400513, 376.219240, 55.056519);
	this.bezierCurveTo(374.539060, 53.712528, 373.698970, 52.104497, 373.698970, 50.232422);
	this.lineTo(373.698970, 9.479736);
	this.bezierCurveTo(373.698970, 7.607715, 374.539060, 5.999685, 376.219240, 4.655640);
	this.bezierCurveTo(377.899400, 3.311699, 379.915760, 2.639703, 382.268310, 2.639648);
	this.lineTo(402.210690, 2.639648);
	this.bezierCurveTo(411.138870, 2.639703, 418.003120, 3.863578, 422.803470, 6.311279);
	this.bezierCurveTo(428.035830, 8.952441, 430.652040, 12.936812, 430.652100, 18.264404);
	this.bezierCurveTo(430.652040, 23.351840, 428.251890, 27.215362, 423.451660, 29.854980);
	this.bezierCurveTo(428.251890, 32.496118, 430.652040, 36.360372, 430.652100, 41.447754);
	this.closePath();
	this.moveTo(403.652100, 11.784668);
	this.bezierCurveTo(403.652060, 11.015671, 403.171600, 10.631150, 402.210690, 10.631104);
	this.bezierCurveTo(401.251190, 10.631150, 400.771450, 11.015671, 400.771480, 11.784668);
	this.lineTo(400.771480, 25.031982);
	this.bezierCurveTo(400.771450, 25.752717, 401.251190, 26.113068, 402.210690, 26.113037);
	this.bezierCurveTo(403.171600, 26.113068, 403.652060, 25.752717, 403.652100, 25.031982);
	this.closePath();
	this.moveTo(403.652100, 34.968018);
	this.bezierCurveTo(403.652060, 34.200462, 403.171600, 33.816674, 402.210690, 33.816650);
	this.bezierCurveTo(401.251190, 33.816674, 400.771450, 34.200462, 400.771480, 34.968018);
	this.lineTo(400.771480, 48.215332);
	this.bezierCurveTo(400.771450, 48.984383, 401.251190, 49.368904, 402.210690, 49.368896);
	this.bezierCurveTo(403.171600, 49.368904, 403.652060, 48.984383, 403.652100, 48.215332);
	this.closePath();
  }

}
//--------------------------------------------------------------------------------------

//START
init();

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


CSS

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


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

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


 

簡単な説明


[説明図]

下図の様に、InkscapeのテキストをCreateJS Graphicsクラスで描画可能です。(ゴマカシとイイカゲンの技術)


 

InkscapeとInk2canvasを用意する

フリーソフトである、Inkscapeを用意します、VSG形式のテキストを書き出しますので、プラグインであるInk2canvasでHTML形式で書き出すとコンテキスト(ctx)の形式のデータが得られます。
これをGraphicsクラスで描画出来るよう加工しますと、通常のGraphicsを描画と同じ要領で使えます。


Inkscape

フリーソフトでは有名ですから、詳細は言いません。下記よりダウンロード出来ます。v0.48.5 (14/07/18)

【InkscapeのDL】窓の杜: Inkscape、ベクトル画像を作成できるフリーの多機能ドローソフト


Ink2canvas

Ink2canvasは、Inkscape描画のファイル(SVG)をHTML5 Canvasに変換するプラグインで、HTML形式で書き出します。フォントをコンテキスト(ctx)の形式にしていますのでGraphicsクラスで利用できる理屈です。
karlisson's Ink2canvas at master (GitHub)

【Ink2canvasのDL】GitHub: hacktoon/ink2canvas


Ink2canvasの使用方法の新しい記事がなく、とまどったのですが、解凍すれば、以下のファイルなどが得られますので、「Inkscape」の所定のフォルダに入れるだけです。


ink2canvas(folder)
ink2canvas.inx
standalone.py (なくとも動作する)


「Inkscape」プログラム、次の、extensionsフォルダにコピーまたは移動すればよい。簡単それだけです。
Program Files - Inkscape - share - extensions


フォントをGraphicsクラスで使用できる様に準備する

Inkscapeで文字を書き、位置を調整しInk2canvasでHtmlファイルで書き出します。これを加工する訳です。
Graphicsクラスでは大きさがわかりませんので、フォントを作るとき少々コツがいります。


 

ロゴ文字などの大きな文字を例にとります。(60-80ポイント文字)、作り方に少々コツがいります。

 

1. 「ファイル」-「新規」-「web_banner_468x60」ドキュメントを作ります。(728x90でも可)
(前の作業画面があると間違いの元になりますので「終了」します)
2. 画面キャプチャのため、Inkscapeを 100% にします。
3. フォントを選定して「デフォルトとして設定」にします。
4. テキストを書きます。左、上、の余白を 4-5 ピクセルに調整してドラッグで全体の配置の調整。
最重要、余白は自由ですが、位置の移動は「パス変換前」に行ってください。
5. 「パス」-「オブジェクトをパスへ」でテキストをパスにします。
6. 「オブジェクト」「グループ解除」でバラバラにします。
7. 必要であれば分解された文字の「X方向位置」調整をなどを行います。通常は不要です。
「パス」変換後は「グループ移動」を絶対しないでください。行った場合は「終了」して「最初からやり直し」になりますので特に注意のこと。
8. Inkscape画面をキャプチャして大きさを決定しメモしておきます。
9. 「ファイル」-「名前を付けて保存」、ファイルの指定、中ごろに「HTML5保存」がありますので、必ずHTMLを指定して保存します。(Ink2canvasがあるためHTML保存が出来る)


キャプチャして大きさを決定(調べる)するのは、あとで中央補正する時「大きさ」が必要だからです。
(ドキュメント左上よりドラッグしてカーソルの位置から手計算でもわかりますが)
「パス」変換後「グループ移動」すると、ctx.transform() が入りパスが狂ってしまいます。使えません。


 

Htmlのソースのpath部分を加工する

Htmlのソースを開き、#path 部分のみコピーします。Graphicsクラスの拡張で使用するに不要のものが在るため、下記の記述は削除します。フォントの外形データだけが必要になります。


1. ctx.fillStyle、削除。
2. ctx.beginPath()、ctx.fill()、ctx.restore()、など削除。
3. 中の、ctx.moveToの前にctx.closePath()を追加。(重要です)
4. ctxをthisにする。


加工前

下記は、単なる例です、文字数分あります。作業によっては#text....など生成される場合あり。



// #path2998
	ctx.fillStyle = 'rgb(0, 0, 0)';
	ctx.beginPath();
	ctx.moveTo(40.554687, 19.832031);
	ctx.bezierCurveTo(40.554646, 24.167997, 39.535116, 27.753930, 37.496094, 30.589844);
	ctx.bezierCurveTo(34.847620, 34.269549, 30.453094, 36.109391, 24.312500, 36.109375);
	ctx.lineTo(16.507812, 36.109375);
	ctx.lineTo(16.507812, 52.000000);
	ctx.lineTo(4.027344, 52.000000);
	ctx.lineTo(4.027344, 4.011719);
	ctx.lineTo(23.890625, 4.011719);
	ctx.bezierCurveTo(29.539032, 4.011767, 33.828090, 5.664109, 36.757812, 8.968750);
	ctx.bezierCurveTo(39.289022, 11.804728, 40.554646, 15.425818, 40.554687, 19.832031);
	ctx.closePath();
	ctx.moveTo(27.582031, 19.972656);
	ctx.bezierCurveTo(27.582003, 18.191440, 27.060519, 16.767613, 26.017578, 15.701172);
	ctx.bezierCurveTo(24.974583, 14.634803, 23.199195, 14.101600, 20.691406, 14.101563);
	ctx.lineTo(16.507812, 14.101563);
	ctx.lineTo(16.507812, 26.019531);
	ctx.lineTo(20.656250, 26.019531);
	ctx.bezierCurveTo(23.351538, 26.019557, 25.203099, 25.433620, 26.210937, 24.261719);
	ctx.bezierCurveTo(27.124972, 23.207060, 27.582003, 21.777374, 27.582031, 19.972656);
	ctx.closePath();
	ctx.fill();
	.
	.
	.
	ctx.restore();

● strokeStyle、fillStyle、beginPath()はCreateJS Graphicsクラスで処理されます。
closePath()を入れないとフォントによっては、strokeStyleのライン描画が途切れます。要確認。


加工後

加工後、各文字のデータは、.moveTo()で始まり .closePath() で終わる形になります。


	//
	this.moveTo(40.554687, 19.832031);
	this.bezierCurveTo(40.554646, 24.167997, 39.535116, 27.753930, 37.496094, 30.589844);
	this.bezierCurveTo(34.847620, 34.269549, 30.453094, 36.109391, 24.312500, 36.109375);
	this.lineTo(16.507812, 36.109375);
	this.lineTo(16.507812, 52.000000);
	this.lineTo(4.027344, 52.000000);
	this.lineTo(4.027344, 4.011719);
	this.lineTo(23.890625, 4.011719);
	this.bezierCurveTo(29.539032, 4.011767, 33.828090, 5.664109, 36.757812, 8.968750);
	this.bezierCurveTo(39.289022, 11.804728, 40.554646, 15.425818, 40.554687, 19.832031);
	this.closePath();
	this.moveTo(27.582031, 19.972656);
	this.bezierCurveTo(27.582003, 18.191440, 27.060519, 16.767613, 26.017578, 15.701172);
	this.bezierCurveTo(24.974583, 14.634803, 23.199195, 14.101600, 20.691406, 14.101563);
	this.lineTo(16.507812, 14.101563);
	this.lineTo(16.507812, 26.019531);
	this.lineTo(20.656250, 26.019531);
	this.bezierCurveTo(23.351538, 26.019557, 25.203099, 25.433620, 26.210937, 24.261719);
	this.bezierCurveTo(27.124972, 23.207060, 27.582003, 21.777374, 27.582031, 19.972656);
	this.closePath();
	//
	.
	以下省略
	.

Graphicsクラスでの利用

Graphicsクラスでの利用には拡張して使用します。関数名は自由です。(ワタシの場合、明示的にExを付けている)
Graphicsクラスでの書式で利用できますので便利です。外形の形状さえわかれば .graphics で処理できます。


Graphicsクラス拡張関数
引数、x,y は 0,0 で使用ください。塗りの画像位置が変わると厄介です。


createjs.Graphics.prototype.関数名=function(x,y) {Graphics外形データ}

記述例


var インスタンス=new createjs.Shape();
インスタンス.graphics.beginFill("#FFFFFF").drawCanvasSvgEx(0,0);
インスタンス.regX=決めてある幅/2;
インスタンス.regY=決めてある高さ/2;
.
.

----------------------------------------------------------------
//拡張関数
createjs.Graphics.prototype.drawCanvasSvgEx=function(x,y) {

	//
	this.moveTo(42.547276, 974.401730);
	this.bezierCurveTo(42.547234, 978.737700, 41.527704, 982.323630, 39.488682, 985.159550);
	this.bezierCurveTo(36.840209, 988.839250, 32.445682, 990.679090, 26.305088, 990.679080);
	.
	.
	.
	.
	.
}

● 特徴

1. Webフォントでは無いためにライセンスの問題が解決します。(フリーフォント使用であること)
2. Graphicsクラスと同様に扱えるので便利である。

3. 文字個別のアニメなどはできません。画像塗りこみ文字を拡大した場合、画像も拡大します。


● 使い方は自由


インスタンス.graphics.beginFill("#FFFFFF").drawCanvasSvgEx(0,0);

インスタンス.graphics.ss(2).s("#FFFFFF").beginFill("#FF0000").drawCanvasSvgEx(0,0);

インスタンス.graphics.beginBitmapFill(画像result値,"repeat",null).drawCanvasSvgEx(0,0);

注意事項

 

● 鋭角の処理

文字が小さく線幅が太いと鋭角の部分が延びて文字が壊れるので、setStrokeStyle()により適正に処理ください。
このデモでは文字が大きいので必要は有りません。
miterLimitは、joints=0 で有効。


setStrokeStyle ( thickness [caps=0] [joints=0] [miterLimit=10] [ignoreScale=false] )

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

下記の様にしておけば防げます、変更可

インスタンス.graphics.ss(線幅,1,1,1,false).s("#FFFFFF").drawCanvasSvgEx(0,0);

● StrokeStyleのラインが切れる

作業の際、closePath()を入れるのを忘れた場合です。但しフォントによっては起き無いこともあります。


● 画像と塗りこみの位置関係

画像と塗りこみの位置関係は左上を「原点」として、図の様に塗りこまれます。文字間隔を変えた場合画像位置が狂いますので、Matrix修正します。(次の章「画像の塗りこみ」参照)


● 大きさの変更

テキストではなく、Graphicsで有ることを認識ください、大きさの変更はスケールの変更で行います。塗りこみ画像はマスクでは有りませんので、大きさの変更に伴い変化します。


Mask材としての利用

GraphicsですからMask材としての利用もできます。作るのに大変ですが、compositeOperationより多様性があると思います。(ワタシとしては、どうしてもフォントをGraphicsで描画したかっただけの理由ですが...)


カーニング調整した配置

 

工夫すれば1文字ずつの文字間隔を調整して配置可能です。(あとはアイデア次第)
拡張関数を1文字ずつ処理するように書き換えて、ループ処理するだけです。
重なり、文字の間隔は変数 margin で調整できます。


Textクラスでないので、大きさは暫定値で正確ではありませんので、中心がずれる場合があります。(気付く人は皆無と思いますが、.....)



	//GauFontMilkChoco 434x58
	var margin=-10;
	var m_width=0;
	var text_len=7;//文字数

	//個別に実行
	for (var i=0; i < text_len; i++) {

		var partsSvg=new createjs.Shape();
		partsSvg.x +=i*margin;
		partsSvg.graphics.beginFill("#FF0000").drawCanvasSvgEx3(0,0,i);
		partsSvg.shadow=new createjs.Shadow("#000000",0,0,5);
		//パーツコンテナ収容
		partsbox.addChild(partsSvg);

	}

	//幅修正値
	m_width=margin*(text_len-1);

	partsbox.regX=(434+m_width)/2;
	partsbox.regY=58/2;
	partsbox.scaleX=1;
	partsbox.scaleY=1;
	partsbox.x=canvasWidth/2;
	partsbox.y=canvasHeight/2+80;
	partsbox.rotation=0;

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

createjs.Graphics.prototype.drawCanvasSvgEx3=function(x,y,n) {

	if(n==0) {
		1文字目のデータ
	}
	if(n==1) {
		2文字目のデータ
	}
	.
	.
	.

}

通常の塗り

通常のGraphicsクラスの処理と同じですから効率的です。


記述例


ベタぬり
partsSvg.graphics.beginFill("#FF0000").drawCanvasSvgEx3(0,0,i);
虹色
var color=createjs.Graphics.getHSL(i/7*360,100,50);//直接
partsSvg.graphics.beginFill(color).drawCanvasSvgEx3(0,0,i);
白枠ベタぬり
partsSvg.graphics.ss(2).s("#FFFFFF").beginFill("#00CED1").drawCanvasSvgEx3(0,0,i);
白枠透過ベタぬり
partsSvg.graphics.ss(2).s("#FFFFFF").beginFill('rgba(0,0,0,0.3)').drawCanvasSvgEx3(0,0,i);

画像の塗りこみ

 

画像の塗りこみも簡単ですが、間隔の調整をしていますので、画像配置をMatrixで修正します。
その為、上図のように文字間隔を変更しても画像のパターンが一致しますので綺麗に仕上がります。



	//GauFontMilkChoco 434x58
	var margin=-10;
	var m_width=0;
	var text_len=7;//文字数

	//個別に実行 OK
	for (var i=0; i < text_len; i++) {

		var partsSvg=new createjs.Shape();
		partsSvg.x +=i*margin;

		var img=画像result値;
		var partsSvg=new createjs.Shape();
		partsSvg.x +=i*margin;
		var matrix=new createjs.Matrix2D();//修正済み
		matrix.translate(-i*margin,0);
		partsSvg.graphics.beginBitmapFill(img,"no-repeat",matrix).drawCanvasSvgEx3(0,0,i);//画像

		//partsSvg.graphics.ss(2).s("#FFFFFF").beginFill("#0BBDA2").drawCanvasSvgEx3(0,0,i);//ライン

		partsSvg.shadow=new createjs.Shadow("#000000",0,0,5);//陰影
		//パーツコンテナ収容
		partsbox.addChild(partsSvg);

	}

	//幅修正値
	m_width=margin*(text_len-1);

	partsbox.regX=(434+m_width)/2;
	partsbox.regY=58/2;
	partsbox.scaleX=1;
	partsbox.scaleY=1;
	partsbox.x=canvasWidth/2;
	partsbox.y=canvasHeight/2+80;
	partsbox.rotation=0;


他の方法

他にも方法があると思うのですが、探せませんので、金のかからんフリーソフト、Inkscape、Ink2canvasで対処テストしました。将来は Html5 Canvas仕様 処理で簡単に出来るように成ると思ってはいますが.......


 

文字を分割しない画像装飾テキスト (通常文字表示)

今までは、文字を分解(分割)して画像装飾していましたが、今回は文字を分割しない方法です。
単に表示するだけの目的で簡単な処理ですから、別段説明のいるものでは有りません。
「デモ」では一番上に表示しています。文字の間隔は変更できませんし、アニメ向きではありません。


使用例


//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=55;//暫定

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

//MAINテキスト
var img=assets[2];//画像
//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
var main_text=createMultiTextCanvas2(canvasWidth,50,"Bold 35px","Arial","#FF1493","#FFFFFF",2,"#000000",true,img,1,true,mainstring,true,false);

maintextcontainer.x=canvasWidth/2;//中央補正
maintextcontainer.addChild(main_text);

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

//画像修飾Multiテキストインスタンスを作る2
//CanvasW,H,サイズ,フォント,文字色,ライン色,アウトライン幅,虹色,スペース,陰影色,陰影,画像,画像透明度,文字,base表示,line表示
function createMultiTextCanvas2(CanvasW,CanvasH,size,font,fcolor,lcolor,outline_w,scolor,shadow,img,imgalpha,imgshadow,str,base,line) {

	var fontdata=size + " " + font;

	//コンテナ
	var contna=new createjs.Container();

	//文字インスタンスを作る
	var t=new createjs.Text("",fontdata,fcolor);
	//文字入れる
	t.text=str;
	t.name="base";
	//base原点中央
	t.textAlign="center";
	t.textBaseline="middle";
	if (shadow) {t.shadow=new createjs.Shadow(scolor,0,0,4);}//陰影
	//base表示
	if(!base) {t.visible=false;}

	//fill画像
	var canvas=document.createElement("canvas");
	canvas.width=CanvasW;
	canvas.height=CanvasH;
	var ctx=canvas.getContext("2d");

	//画像
	var pattern=ctx.createPattern(img,"repeat");
	ctx.fillStyle=pattern;
	ctx.font=fontdata;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	ctx.globalAlpha=imgalpha;

	if (imgshadow) {set_shadow (ctx,scolor,0,0,4);}//陰影
	//fill
	ctx.fillText(str,CanvasW/2,CanvasH/2);
	var img_txt=new createjs.Bitmap(canvas);
	img_txt.name="image";
	//原点中央
	img_txt.regX=CanvasW/2;
	img_txt.regY=CanvasH/2;

	//line
	var canvas=document.createElement("canvas");
	canvas.width=CanvasW;
	canvas.height=CanvasH;
	var ctx=canvas.getContext("2d");
	ctx.strokeStyle=lcolor;
	ctx.font=fontdata;
	ctx.textAlign="center";
	ctx.textBaseline="middle";
	ctx.lineJoin="miter";
	ctx.miterLimit=1;

	if (shadow) {set_shadow (ctx,scolor);}//陰影
	//stroke
	ctx.lineWidth=outline_w;
	ctx.strokeText(str,CanvasW/2,CanvasH/2);
	var line_txt=new createjs.Bitmap(canvas);
	line_txt.name="line";
	//原点中央
	line_txt.regX=CanvasW/2;
	line_txt.regY=CanvasH/2;

	//base表示
	if(!line) {line_txt.visible=false;}
	contna.addChild(t,img_txt,line_txt);

	//戻り
	return contna;
}

Webフォントの使用も可能です。Webフォント使用の場合は下記記事を参照ください。

【参照】当方の記事: CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する

【参照】当方の記事: CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正


画像

原則、使用者が用意ください。640x300画像2枚、640x300画像1枚、デモ使用の画像は「デモページ」にあります。


FONT

FONTは Graphic Arts Unit さんの制作されたフリーフォント「GauFontMilkChoco」を使用しました。
また、Webフォントとしての使用をも許可(非営利目的での使用)していただきました、感謝いたします。

【FONT】FreeFont: ガウプラ



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

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


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]