街撮りchの中のひとのブログ: shigeki.takeguchi.log

もうすぐ還暦ジジイが街撮りのYouTubeチャンネルで奮闘する記録

Paper.jsを触ってみた。

目次

HTML5のCanvasってそのままじゃあ、どうも扱いにくいというか学ぶ時の最初のハードルが高いという印象があった。
その中でもちょっといい感じだと思ったベクターグラフィックを扱いやすくするフレームワークPaper.jsを触ってみた。
おそらく他のフレームワークもそうだろうけどFlashのActionScriptを触ったことあるってひとだと馴染みやすい。
自分のサイトの背景で動くものからはじめてみたのがこれ

まずはHTMLの記述から。
canvasにid属性とその値を設定する。この場合は「myCanvas」とした。少し注意しないといけないのがscript要素のtype属性値の記述。JavaScriptの場合、HTML5ではtype属性そもそも記述しなくてもいいし、記述する場合も「text/javascript」とするがPaper.jsでは値を「text/paperscript」とする(最初書き忘れてたら何も表示されなかった。。。)。リファレンス読むと「text/javascript」という属性値でもやる方法があるけど今回は省略。で、もうひとつは描画するためのcanvasのid属性値をcanvasという属性の値に記述すること(これも違う方法が用意されている)。ちょっとやり方がいろいろあるみたいなので統一して欲しい気もする。
これで準備は終わり。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<!--Paper.jsの読み込み-->
<script type="text/javascript" src="js/paper.js"></script>
<!--Paper.jsへのコードを以下に記述する-->
<script type="text/paperscript" canvas="myCanvas">
</script>
<canvas id="myCanvas"></canvas>
1
2
3
4
5
6
7
8
<script type="text/javascript" src="/common/js/paper.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var myView = new View("myCanvas");
myView.viewSize = new Size(500, 300);
var myCircle = new Path.Circle(myView.center, 50);
myCircle.fillColor = '#000000';
</script>
<canvas id="myCanvas" style="background: #eee;" class="mt15p"></canvas>

上の黒い丸を描画しているのが以下のスクリプトを実行した結果。

1
2
3
4
var myView = new View("myCanvas");
myView.viewSize = new Size(500, 300);
var myCircle = new Path.Circle(myView.center, 50);
myCircle.fillColor = '#000000';

ちょっと解説すると以下はcanvas要素の大きさを設定している。canvasってCSSで幅と高さを指定すると単純に拡大されたり縮小されたりして変な描画になってしまうの?style属性でwidthとheightでPixel指定したら駄目なのかな?なのでwidth、height属性で指定か以下のような指定をする。

1
2
var myView = new View("myCanvas");
myView.viewSize = new Size(500, 300);

以下が黒い丸を描画しているところ。myView.centerってのはcanvasの上下、左右の中心width/2とheight/2の座標がはいる。この場合は250と150となる。座標を直接記述する場合はnew Point(250, 150)ってなる。new Path.Circleって記述で描画される。第2引数の50は半径。myCircle.fillColorは塗りつぶしの色指定となる。この場合は「#000000」で黒で塗りつぶしている。’black’って感じで色名でもよい。

1
2
var myCircle = new Path.Circle(myView.center, 50);
myCircle.fillColor = '#000000';

これでベクターベースの形を描画できるようになる。
ちょっと面白くなってきたのでアニメーションのこと、レイヤーのことなども書いていこうと思う。
次は簡単なアニメーションのやり方かな?

いつもvブログを読んでいただきありがとうございます。
YouTubeチャンネルの運用を続けていくために機材購入、資料購入などで困っております。
よろしければAmazonの欲しいものリストから応援いただけると助かります。

街撮りchの欲しいものリスト

管理人:タケグチシゲキ

フロントエンドエンジニアとして働く55歳のジジイです。
首都圏を中心に散歩動画を撮影してYouTubeで配信してます。現在は夜の街のネオンや光が作り出す陰影が好きで撮影することが多いです。

YouTbueチャンネル

YouTubeチャンネルもぜひご覧ください。思い出の街や気になる街の風景を楽しんでいただければと思います

X(旧Twiiter)

X(旧Twiiter)でも情報発信しております。よろしければフォローいただけると嬉しいです

記事や動画について知っている情報を教えていただけると幸いです。どんなささいなことでも大丈夫です。

また、仕事依頼、コラボ依頼、著作物の提供などについてのお問い合わせは下記のお問い合わせフォーム、X(旧Twiiter)のDMでお待ちしております

お問い合わせ

ブログ記事やYouTubeチャンネルの動画に関するコメント、お仕事依頼、コラボ依頼、著作物の提供についてなどなどお問い合わせにて随時募集中です。
情報提供などもお待ちしております。

お問い合わせはこちらのGoogleフォームからお願いいたします