HTML5 canvas -その4- | LayOut blue
HTML5のcanvasについてご紹介してきましたが、今回が一応最後になります。もちろん、ネタとしてまた書いたりしますが、ご紹介という形は今回が最終回です。今後canvasについては、サンプルの紹介が主になったりしてくると思います。 現在HTML5とCSS3を使用したサイトを作成中ですので、完成しましたらそちらも改めて公開したいと思います。最後にご紹介するのはグラフィックスの変形などです。 グラフィックスの変形 描画Contextは座標を引数にとるメソッドを複数もっていますが、グラフィックスとして表示したときに座標を自動で変換するように設定することによりcanvasで描画されたものにたいして、回転、拡大、傾斜、反転、させることができます。 //拡大 横方向x、縦方向yの倍率 scale(x, y); //回転 座標指定の角度分回転(0, 0)を中心 rotate(value); //移動
HTML5 canvas関連API - web探検隊
canvas要素が持つプロパティ/メソッドプロパティ説明widthキャンバスの領域の幅(ピクセル)。省略時は300ピクセル。canvasタグのwidth属性に対応。heightキャンバス領域の高さ(ピクセル)。省略時は150ピクセル。canvasタグのheitht属性に対応。toDataURL(type,args)キャンバスの内容をdata URL文字列で取得。getContext(cibtextId)描画コンテキストを取得。引数に"2d"を指定すると、2次元グラフィックス用のコンテキストを取得出来る。 2D描画コンテキストが持つプロパティ/メソッド2Dグラフィックスの描画を行うためのコンテキスト(canvas.getContext("2d")で取得可能)が持つプロパティやメソッドです。プロパティ説明canvasこの描画コンテキストの基になったcanvas要素への参照。save()描画コン
How to Drag and Drop on an HTML5 Canvas – Unknown Kadath
We explored using keyboard input to move a shape on an HTML5 canvas here http://html5.litten.com/moving-shapes-on-the-html5-canvas-with-the-keyboard/. Now we’ll take a look at using input from the mouse. With a few simple calculations, you can drag and drop shapes on the canvas with your mouse. UPDATE: I’ve added a companion post for IE compatibility. IE Compatible Canvas Drag and Drop With jQuery
Saving canvas data to image file
This is a small library that lets you easily save a WHATWG canvas element as an imagefile. Files needed: canvas2image.js, base64.js Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly. Using the WHATWG canvas element, you can create all sorts of cool gr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
