WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

canvas基礎

こちらを参考にしました。
developer.mozilla.org

デモ
http://efu.sakura.ne.jp/web/canvas/

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>canvasの練習</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
</head>
<body>
  <!-- canvasの初期のサイズは幅300px,高さ150px -->
  <canvas id="canvas01" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
  </canvas>

  <!-- jsはcanvasタグの後ろに持ってくる -->
  <script src="script.js"></script>
</body>
</html>

javascript

var canvas = document.getElementById('canvas01');

//canvasが対応しているブラウザか確認
if (canvas.getContext){
  console.log('対応している');
} else {
  console.log('対応していない');
}

//2次元のグラフィックスを扱える描画コンテキストを取得
var context = canvas.getContext('2d');

//色をRGBで指定
context.fillStyle = "rgb(255,0,0)";

//第一引数と第二引数で描画の位置を指定
//第三引数で幅、第四引数で高さを設定
context.fillRect(0, 0, 150, 150);

context.fillStyle = "rgba(0,0,200,.5)";
context.fillRect(50, 50, 150, 150);
広告を非表示にする