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]
HTML5とJavaScriptのみで図形を描いてみた
HTML5とJavaScriptのみで図形を描いてみた
- 添付ファイル
-
- canvas.png (9.28 KiB) 閲覧数: 139 回
コメントはまだありません。