canvasが簡単に描けるフレームワーク : kinetic.js【HTML5】

昨日WCAN 2013 springに参加しましたが、HTML5関連の話が主題な感じでした。

数あるAPIの中でもメジャーなのはやはりcanvas。ですが、普段javascriptを書かない人にとっては結構とっつきにくいですよねー。
なので、jQueryレベルの感覚でcanvasを描けるフレームワーク「kinetic.js」を紹介します。

KineticJS HTML5 Canvas Framework

[browser-shot url=”http://kineticjs.com/” width=”760″]

簡単に描けるけど、処理としてはちょっと重いかも、、、

デモ作ってみました。


javascript

[javascript]
//ステージを設定
var stage = new Kinetic.Stage({
container: ‘container’,//#containerを指定
width: 1000,
height: 600
});
//レイヤーを設定
var layer = new Kinetic.Layer();

//背景を設定
var path = new Kinetic.Path({
x: 0,
y: 0,
data: ‘M793.403,479.333c0,6.627-5.372,12-12,12H20.316c-6.627,0-12-5.373-12-12V20c0-6.627,5.373-12,12-12h761.087c6.628,0,12,5.373,12,12V479.333z’,
fillLinearGradientStartPoint: [-50, -50],
fillLinearGradientEndPoint: [800, 800],
fillLinearGradientColorStops: [0, ‘#77B7E5’, 1, ‘#004DA1’],
scale: 1
});
//グループ1(schema.org)の設定開始
var group1 = new Kinetic.Group({
x: 0,
y: 0,
draggable: true
});
//背景の雲
var cloud1 = new Kinetic.Path({
x: 0,
y: 0,
data: ‘M371.42,131.103c0-22.751-18.444-41.195-41.195-41.195c-5.866,0-11.442,1.234-16.493,3.444c-3.055-17.557-18.356-30.908-36.786-30.908c-0.646,0-1.288,0.016-1.925,0.049c-5.171-13.344-18.123-22.811-33.293-22.811c-13.928,0-25.984,7.98-31.869,19.614c-1.062-0.091-2.133-0.147-3.219-0.147c-14.905,0-27.767,8.733-33.758,21.36c-0.063,0-0.125-0.005-0.187-0.005c-18.387,0-34.026,11.737-39.854,28.125c-21.895,0.965-39.351,19.016-39.351,41.149c0,22.751,18.444,41.195,41.195,41.195c4.968,0,180.322-0.615,184.555-0.615c18.114,0,33.416-12.014,38.389-28.507C366.089,154.306,371.42,143.329,371.42,131.103z’,
fillLinearGradientStartPoint: [-50, -50],
fillLinearGradientEndPoint: [800, 800],
fillLinearGradientColorStops: [0, ‘#FFFFFF’, 1, ‘#CCCCCC’],
scale: 1
});
//Schema.org
var cloudText1 = new Kinetic.Text({
x: 40,
y: 75,
text: ‘Schema.org’,
fontSize: 25,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//Microdata / Microformats nRichsnipet
var cloudText1_2 = new Kinetic.Text({
x: 40,
y: 125,
text: ‘Microdata / Microformats nRichsnipet’,
fontSize: 18,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//シェイプをグループ1に追加
group1.add(cloud1);
group1.add(cloudText1);
group1.add(cloudText1_2);

//グループ2(RDF)の設定開始
var group2 = new Kinetic.Group({
x: 400,
y: 50,
draggable: true
});
var cloud2 = new Kinetic.Path({
x: 0,
y: 0,
data: ‘M371.42,131.103c0-22.751-18.444-41.195-41.195-41.195c-5.866,0-11.442,1.234-16.493,3.444c-3.055-17.557-18.356-30.908-36.786-30.908c-0.646,0-1.288,0.016-1.925,0.049c-5.171-13.344-18.123-22.811-33.293-22.811c-13.928,0-25.984,7.98-31.869,19.614c-1.062-0.091-2.133-0.147-3.219-0.147c-14.905,0-27.767,8.733-33.758,21.36c-0.063,0-0.125-0.005-0.187-0.005c-18.387,0-34.026,11.737-39.854,28.125c-21.895,0.965-39.351,19.016-39.351,41.149c0,22.751,18.444,41.195,41.195,41.195c4.968,0,180.322-0.615,184.555-0.615c18.114,0,33.416-12.014,38.389-28.507C366.089,154.306,371.42,143.329,371.42,131.103z’,
fillLinearGradientStartPoint: [-50, -50],
fillLinearGradientEndPoint: [800, 800],
fillLinearGradientColorStops: [0, ‘#FFFFFF’, 1, ‘#CCCCCC’],
scale: 1
});
//RDF
var cloudText2 = new Kinetic.Text({
x: 40,
y: 75,
text: ‘RDF’,
fontSize: 25,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//RDF/RSS 2.0
var cloudText2_2 = new Kinetic.Text({
x: 40,
y: 125,
text: ‘RDF/RSS 2.0’,
fontSize: 18,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//グループ2にシェイプを追加
group2.add(cloud2);
group2.add(cloudText2);
group2.add(cloudText2_2);

//グループ3の設定開始
var group3 = new Kinetic.Group({
x: 50,
y: 250,
draggable: true
});
//雲
var cloud3 = new Kinetic.Path({
x: 0,
y: 0,
data: ‘M371.42,131.103c0-22.751-18.444-41.195-41.195-41.195c-5.866,0-11.442,1.234-16.493,3.444c-3.055-17.557-18.356-30.908-36.786-30.908c-0.646,0-1.288,0.016-1.925,0.049c-5.171-13.344-18.123-22.811-33.293-22.811c-13.928,0-25.984,7.98-31.869,19.614c-1.062-0.091-2.133-0.147-3.219-0.147c-14.905,0-27.767,8.733-33.758,21.36c-0.063,0-0.125-0.005-0.187-0.005c-18.387,0-34.026,11.737-39.854,28.125c-21.895,0.965-39.351,19.016-39.351,41.149c0,22.751,18.444,41.195,41.195,41.195c4.968,0,180.322-0.615,184.555-0.615c18.114,0,33.416-12.014,38.389-28.507C366.089,154.306,371.42,143.329,371.42,131.103z’,
fillLinearGradientStartPoint: [-50, -50],
fillLinearGradientEndPoint: [800, 800],
fillLinearGradientColorStops: [0, ‘#FFFFFF’, 1, ‘#CCCCCC’],
scale: 1
});
//OGP
var cloudText3 = new Kinetic.Text({
x: 40,
y: 75,
text: ‘OGP’,
fontSize: 25,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//Facebook
var cloudText3_2 = new Kinetic.Text({
x: 40,
y: 125,
text: ‘Facebook’,
fontSize: 18,
fontFamily: ‘ヒラギノ角ゴ Pro W3’,
fill: ‘#555’,
width: 380,
padding: 20,
align: ‘center’
});
//グループ3にシェイプを追加
group3.add(cloud3);
group3.add(cloudText3);
group3.add(cloudText3_2);

//グループと背景をレイヤーに追加
layer.add(path);
layer.add(group1);
layer.add(group2);
layer.add(group3);

//ステージに追加
stage.add(layer);
[/javascript]

めっちゃクチャ汚いコードになっていしまいました。

ドラッグ&ドロップも使えますしアニメーションも使えます。
svgのパスはイラストレーターで雲を作成 -> svgで保存しテキストエディタで開くと普通にパス見れます。

なんか図形をパスに変換してくれるサービスとかないかなぁ。。。

もっと詳しいチュートリアルはコチラからどうぞ。

1shiharaT
1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。
本名 : 石原隆志 2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です