HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028：画像が重なった場合の処理方法を指定する TIPS 029：キャンバスの設定を保存＆復元する TIPS 030：画像を拡大／回転／変形して表示する TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける TIPS 032：マウスポインタの座標に応じて図形を描画する TIPS 033：キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028：画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
CanvasとJavaScriptで作るブロック崩しの完成 (1/4)
FacebookのGraph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。前回に続き、「ブロック崩しゲーム」アプリの核となるゲームの処理を作っていきます。 Step 7：ブロックを崩す 前回作成したボールを動かす処理に、ブロックと衝突したときにブロックを崩す（削除する）処理を加えます。 this.onEnterFrame = function(){}内に、以下のコードを追加しましょう。 for(var i = 0 ; i < blockContainer.numChildren() ; i++) { var blockObj = blockContainer.getChildAt(i); if(ja.hitObj.intersect(boxObject,blockObj)){ blockContainer.rem
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
