HOME JavaScript入門[HTML5編] 描画面を移動させる 前のページでは描画面を回転・変形させる方法を見てきました。 このページでは描画面を移動する方法について見ていきたいと思います。 描画面を回転させる時に、起点を移動させれば扱いやすくなります。 描画面を移動させる命令文 前のページではsetTransform()の最初の4つの引数を見てきましたが、 5番目と6番目の引数は描画面を移動させる時に指定します。 それと、もう一つ別の命令を見てみましょう。 context.setTransform(m11,m12,m21,m22,dx,dy) 第5引数,第6引数で指定した分だけ描画面を移動します。 context.translate(dx,dy) 指定しただけ描画面の起点(左上の点)を移動します。 この二つは同じ効果があります。 描画面の移動だけでなく変形も必要ならsetTran
構文 context . save() 現在の状態をスタックの最後に加えます。 context . restore() スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 仕様 コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます: 現在の変換マトリックス 現在のクリップ領域 次の属性の現在の値: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、b
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと. 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した.canvas要素の仕様は現在進行中で色々と変化しているため,一筋縄で行かないが大方のapiについて書き上がったので公開する.なお,まだ使えない機能等満載だったり,内容に間違いがあっても中々検証することができないので,その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり,webページの機能性・視認性が重要視される昨今では,svg要素と並び重要な役割を果たしている.もともとapple社が自社製osの機能向上策として,同
JavaScript Advent Calendar 2010も22日目!あと3日ですよ。僕はちょうど学んだばかりのCanvasをアウトプットもかねて、まとめと実践を書いてみます。知ることと行うことは同一である、最近行ったセミナーでも言ってました。 jsdo.itにはほんまにこれCanvasなん?なサンプルいっぱいありますね。あーいうの書けるようになりたいなぁとか思いつつ、jQueryばっかりさわってた僕は.animate()メソッドの便利さに取り憑かれていたので、Canvasの絵もまだ上下左右で動かすくらいしかできません。慣れが必要です。。 どうでもいい情報としてCanvasの読み方なんですけど、「キャンバス」じゃなくて「カンバス」が正しいようです。キャンバス・カンバスどっちでもよさげ。僕はキャンバスって読んでました。けどカンバスにします。 前置きはこれくらいにして、今回は次のようなカラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く