JavaScriptでの2次元配列を使った90度の回転処理 : 構想雑文
（何を書いているのは文章の意味がわかりにくいけど）、JavaScriptで1次元配列（普通の配列）にまとめた4×4に配置する配列の中身を、90度回転させる処理については、こちらに記事をまとめています。 JavaScriptでの配列を使った90度の回転処理 http://blog.livedoor.jp/unahide/archives/53129405.html 4×4に配置された、例えば以下のような表示になるように配列を用意して ■■■■ □□□□ □□□□ □□□□ これを 90度 回転させて 例えば、以下のような表示に変化させるって話です。 ■□□□ ■□□□ ■□□□ ■□□□ 前の記事では、普通の配列（一次元配列）だったけど、これをこの記事では二次元配列でやるよ！ って話です。 ということで、まず、最初の状態の配列を用意すると以下のような感じです。 blocks = [ [1,1
Canvasに入門してみた。 - 車輪を再発明 / koba04の日記
最近Canvasと触れ合う機会があり、色々勘違いしていたり、こんなことも出来るんだみたいなことがあったのでメモ。 描画をプログラミングでするのがはじめてだったので、やっている人には常識なことばかりかもしれませんが。 参考 まず最初に見るサイトとしては日本語だとこの辺りがわかりやすいんじゃないかと思います。 http://www.html5.jp/canvas/index.html https://developer.mozilla.org/ja/Canvas_tutorial Canvasの基準点 Canvasには基準点というのがあって、全てはその位置から「x」にいくら「y」にいくらというように図形を配置する場所を指定します。例えばx軸に「100」、y軸に「50」ずらした「40」の正方形を描画するには下記のように指定します。(他にも指定する方法はあります) // ctxはcanvasのco
transform() メソッド - Canvasリファレンス - HTML5.JP
原文：http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-transform サンプル transform() メソッドは、一度セットされると、それ以降に描かれる図形はすべてその変換マトリックスが適用されます。transform() メソッドで変換マトリックスを定義したあとに、別の変換マトリックスを transform() メソッドで定義すると、2つの変換マトリックスを掛け合わせた変換マトリックスが適用された状態となります。 もし、新たな変換マトリックスを適用したい場合は、setTransform() メソッドで変換マトリックスを定義しなければいけないことに注意してください。 では、まず setTransform() メソッドの使い方をみていきましょう。 setTransform() メソッドの例 このサンプルは、
transform(a, b, c, d, e, f)－Canvasリファレンス
transform(a, b, c, d, e, f)メソッドのそれぞれの引数は、 transform(伸縮x, 傾斜y, 傾斜x, 伸縮y, 移動x, 移動y)となります。 何も変形しない場合の引数の値は、transform(1, 0, 0, 1, 0, 0)となります。 transform()メソッドでは、 scale()・ rotate()・ translate() をまとめて指定することができます。 rotate()は回転ですが、transform()の引数に三角関数を利用して伸縮と傾斜を組み合わせることで回転結果を得られます。 それぞれの個別メソッドとtransform()メソッドとの関係は以下の通りです。 scale(x, y)は、transform(x, 0, 0, y, 0, 0)と同じ rotate(angle)は、transform(Math.cos(angle), M
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
