HTML5とJavaScriptのみで図形を描いてみた

naohiro19
記事: 256
登録日時: 15年前
住所: 愛知県

HTML5とJavaScriptのみで図形を描いてみた

投稿記事 by naohiro19 » 8年前

HTML5のcanvasに、図形を描画することとができます。画像は一切使っていません。添付ファイルは画像です。
[codehtml]




キャンバス









[/code]

[codejscript]

(function () {
'use strict';

var stage = document.querySelector("#stage");
var result = document.querySelector('#result');
var ctx;
var width = 640;
var height = 480;

// 取得できなければ終了
if( typeof stage.getContext === 'undefined') {
result.textContent = "キャンバスのコンテキストに失敗しました。";
return;
}

// コンテキストの取得・初期化設定
ctx = stage.getContext('2d');
stage.width = width;
stage.height = height;

ctx.fillStyle = "#00ee00";
ctx.strokeStyle = "#000000";

for(var x = 0; x < 10; x++){
for(var y = 0; y < 10; y++){
ctx.fillRect(x * 32, y * 32, 32, 32);
ctx.strokeRect(x * 32, y * 32, 32, 32);
}
}
})();
[/code]
添付ファイル
canvas.png
canvas.png (9.28 KiB) 閲覧数: 139 回

コメントはまだありません。