canvas要素の概要
キャンバス要素は、HTML5から導入された要素です。
canvas要素内にグラフィックを描画します。
使い方によってはテトリスのようなゲームを作成することにも使えますし、グラフを表示する等の用途にも使用出来ます。
基本的にjavascriptを併用しての描画となりますので、もしかしたら初心者向きではないかもしれません。
細かな部分は簡単には説明しきれませんので、このページでは要素の使われ方のサンプルとスクリプトの触りだけの紹介となります。
実機サンプル
id=idCanvas1:キャンバス要素の補足
ブラウザの対応具合によっては描画されませんのでご了承下さい。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "utf-8">
<title>独学 Webプログラミング! - YWORK</title>
</head>
<body>
<canvas id="idCanvas1" width="300" height="250" style="background-color: #555;">
canvas要素に対応していないブラウザやjavascriptが機能していないブラウザはこのテキストが表示されます。
</canvas>
<script>
window.onload = function(){
let elmCanvas1 = document.getElementById("idCanvas1");
if(!elmCanvas1||!elmCanvas1.getContext){
return false;
}
else{
let ctxCanvas1 = elmCanvas1.getContext("2d");
let varOriginX = 50;
let varOriginY = 50;
let varSizeX = 50;
let varSizeY = 50;
//四角の枠を表示
ctxCanvas1.strokeStyle = "#F77";
ctxCanvas1.strokeRect(varOriginX, varOriginY, varSizeX, varSizeY);
//塗りつぶし四角形を表示
ctxCanvas1.fillStyle = "#77F";
ctxCanvas1.fillRect(varOriginX, varOriginY, varSizeX, varSizeY);
//画像を読み込んで表示
let objImg = new Image();
let varImgOriginX = 100;
let varImgOriginY = 100;
let varImgSizeX = 150;
let varImgSizeY = 100;
objImg.src="../images/size-img-ywork.png";
objImg.onload = function(){ //画像の読込みが完了したら実行されるファンクション
ctxCanvas1.drawImage(
objImg,
varImgOriginX,
varImgOriginY,
varImgSizeX,
varImgSizeY
);
}
//文字を表示
ctxCanvas1.fillStyle = "#7F7";
ctxCanvas1.fillText("YWORK",100,50,100,100);
}
}
</script>
</body>
</html>