JavaScript で画像処理！ canvas を使ってみよう - WebOS Goodies
前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの
技術日記＠kiwanami - ふつうのドローツール
昨年のcanvas祭りの時にネタとして披露した「ふつうのドローツール」。各方面の許可も出ました。MITでどうぞ。 JSDraw ポイントは、 図形を素直にクラスと継承で表現 イベントの処理をステートパターンで素直に実装 図形のシリアライズ機構を実装 図形と文字が同居 という感じ。 全部で1000行を超えているけども、図形が5個もあるし、後半は無駄にsetter/getterとかも多いし、正味はそんなに大きくないかなと。プログラムの中心は 195行目の paint 関数辺り。 先の勉強会でもJavaScriptでのアプリケーション開発のノウハウという点が大いに議論にもなったということで、少し大きなプログラムをJavaScriptで開発するときの参考になればと思います。 それで、次はいつかなと楽しみにしつつ、こんな時間まで起きていなければいけない現実とも戦いつつ・・・。
livedoor Authの運営終了のお知らせ
livedoor Authの運営終了のお知らせ 2021年3月末をもちまして、livedoor Authの運営を終了いたしました。 長きに渡りご愛顧をいただきまして、誠にありがとうございました。 livedoorホームへ戻る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
