画像を組み込む - Canvas - HTML5.JP
Canvasでは、JPEGやPNGといったブラウザに対応した画像であれば、それを組み込むことができます。このコーナーでは、画像の組み込み方法と、いくつかのオプション機能について紹介していきます。 画像組み込みの基本 Canvasで画像を組み込むためには、drawImageメソッドを使います。与える引数に応じて、描画する画像の扱い方が違ってきます。 ctx.drawImage(image, dx, dy) ctx.drawImage(image, dx, dy, dw, dh) Canvasの座標 (dx, dy) を左上端として、image に格納されたImageオブジェクトを描画します。dw と dh が指定されると、画像は、dw を横幅、dh を縦幅としたサイズに伸縮されます。 ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 元
CanvasアニメーションをHerokuで公開しようよ！ - hp12c
ブログを下記に移転しました。デザイン変更により移転先では記事が一層読みやすくなっていますので、よろしければ移動をお願い致します。 CanvasアニメーションをHerokuで公開しようよ！ : melborne.github.com - もしあなたが暇で暇でしようがなくて 一日中時計をぼーっと眺めるのも悪くない と考えているのなら 次のリンクをクリックしてください 3分くらいならあなたの時間をつぶせるかもしれません http://aclock.heroku.com/ もしあなたがRubyを使っていて JavaScriptのことはよく知らないけれども HTML5のCanvasに興味がでてきて その成果物をネットで簡単に公開できればうれしいかも と考えているのなら 以下の記事を読む価値があるかもしれません もちろん何の保証もありませんが.. Canvasを使ったWebアプリケーションの構築 この
HTML＋JavaScriptだけでブラウザに図形描画（2） - Canvas API -
TIPS 018：キャンバスにテキストを描画する TIPS 019：文字列の横幅を計算する TIPS 020：図形に影効果を追加する TIPS 021：線形グラデーションを表現する TIPS 022：円形グラデーションを表現する TIPS 023：キャンバスに画像を貼り付ける TIPS 024：画像の一部を切り出して貼り付ける TIPS 025：画像を繰り返し表示する TIPS 026：画像の特定領域を切り抜く TIPS 027：特定の座標がパス領域に含まれるかを判定する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 018：キャンバスにテキストを描画する キャンバスにテキストを描画するには、strokeText／fillTextメソッドを利用します。 ［リスト1］キャンバスに塗りつぶし文字、枠文字を描画するコード（text.html） wi
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
