はじめに
ここではプログラムの学習をします
今はやりのＨＴＭＬ５でゲームを作る課程を勉強します
作るゲームは神経衰弱です
コンピュータ言語入門 ＷＥＢ ＨＴＭＬ５の学習-2
canvasに画像ＧＩＦを読み込み表示する。
card（画像が入っている）フォルダーとこのHTMLを同じ場所に置く
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>canvasで図形を描く</title> | |
| <script type="text/javascript"> | |
| <!-- | |
| //Imageオブジェクトを生成して、画像ファイルを先読みしておく | |
| cardimg= new Array(16); | |
| cardimg[1] = new Image(); | |
| cardimg[2] = new Image(); | |
| cardimg[3] = new Image(); | |
| cardimg[4] = new Image(); | |
| cardimg[5] = new Image(); | |
| cardimg[6] = new Image(); | |
| cardimg[7] = new Image(); | |
| cardimg[8] = new Image(); | |
| cardimg[9] = new Image(); | |
| cardimg[10] = new Image(); | |
| cardimg[11] = new Image(); | |
| cardimg[12] = new Image(); | |
| cardimg[13] = new Image(); | |
| cardimg[14] = new Image(); | |
| cardimg[1].src = "./card/1_he.gif"; | |
| cardimg[2].src = "./card/2_he.gif"; | |
| cardimg[3].src = "./card/3_he.gif"; | |
| cardimg[14].src = "./card/0_r2.gif"; | |
| var x; | |
| function disp() { | |
| //描画コンテキストの取得 | |
| var canvas = document.getElementById('hart'); | |
| if (canvas.getContext) { | |
| var context = canvas.getContext('2d'); | |
| //座標(10, 10)の位置にイメージを表示 | |
| for (x=1;x<4;x++){ | |
| context.drawImage(cardimg[x], 10+80*x-80, 10); | |
| } | |
| } | |
| } | |
| function initgame() { | |
| } | |
| //--> | |
| </script> | |
| </head> | |
| <body onLoad="disp()"> | |
| <h2>Canvasで図形を描く</h2> | |
| <canvas width="300" height="150" id="hart" style="background-color:green;"> | |
| 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 | |
| </canvas> | |
| </body> | |
| </html> | |
ｗｉｎｄｏｗｓ 用のプログラムの学習
ｉｐｈｏｎｅ ｉｐａｄ ａｎｄｏｒｏｉｄ用の学習
