こんにちは。日々新しいカテゴリが増えていってここが何のブログなのかわからなくなりつつあります。
それは仕方のないことなんです。人間に知的好奇心があるのがいけない。いや、いけなくはない。
さて。
卒研が始まり、ウォーミングアップ課題に取り組んでいます。
僕のテーマは
「手書き Wiki の配信を受信して、それを表示するビューワをつくってみる」
というものです。
手書きWikiってのは、僕のボスがつくった文字通り手書きでつくれるWikiのことです。
そこからだばだばデータが流れてくる構造をボスが作ってくれたので、それを拾ってブラウザで表示してみろ！ってこと。
コンソールから、流れてくるデータを見ることはできたので、うまいことポートをつないでデータを拾ってきて、JSに食べさせて表示、できればいいんですが。
ここで一つ疑問。(実際には3つも4つもあるんですが、問題は細分化して少しずつやっつけないとね。
「そもそもJSでお絵描きってできるの？」
はい、先生に聞きました。
すると結構昔の記事ですがこんなものを発見。
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」
わーお。
ってことで、ライブラリを落とそう…と思ったらジャンプした先にそれっぽいのがない…
(ミラーを見つけて動かすことはできたけど、それはまた別のお話。)
どうしよう。と困っていたら。
なんと。新しいhtmlには
そこに自在にお絵描きができるらしい！
コードはこんな感じで
<!-- キャンバス配置 --> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); // キャンバスに対して2Dグラフィックスを行うコンテキストを取得 var context = canvas.getContext("2d"); context.strokeStyle = "rgba(255,0,0,1)"; context.beginPath(); context.moveTo(50,50); context.lineTo(200,80); context.lineTo(100,100); context.closePath(); context.stroke(); </script>
これで三角形が描けました。
