やってみたJavaScript(0000)：　canvasつかってみた

2023年9月23日

今さらながらJavaScriptやってみようと思い立ち、やってみたシリーズとして書いていこうと思う。

がんばって続けたい！

モチベーション

これが初回なので、モチベーションを書いておく。

ネットとか本とか見るのがめんどくさい

JavaScriptをやってみようかと思い、ネットの情報とか本とかで勉強しようかと思ったが、既に情報がたくさんありすぎて良いものを探すのがめんどくさい。

それよりも、なにか適当に好きなものを実際に作ってみながら慣れていきたいと思う。

なぜJavaScriptか

ブログやったりする割には今までやったことなかったし、何かいろいろできるんでしょ？webエンジニアといったらJavaScriptじゃないの？

素人から始めて年収ウン百万円になりました！っていう広告も見たことあるし。すごいなJavaScript！

test0000

今回はとりあえず、canvasというものを使って何かできないかなーと思って書き始めた。4桁分もゼロパディングしたことは後悔していない。

canvasつかってみた

https://www.hircos.work/test/test0000/

とりあえず見よう見まねで作ってみた。

プログラミング初心者向けだと、やれ四則演算とか処理分岐とか……つまんなくない？なので絵が出てきたり何か押したら反応したりする感じを目指す。

とりあえず今回はこんな感じ。

  • とりあえずcanvasというキャンバスを置いて、枠で囲ってみた
  • ためしに四角を描いてみた

JavaScriptってのは、htmlの中に埋め込んだり外に出したりするみたい。そのうち外に出したい。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test0000</title>
    <script>
      var cvs;
      var ctx;
      
      window.onload=function(){
	  cvs = document.getElementById("cvs1");
	  ctx = cvs.getContext("2d");

	  ctx.fillStyle = "black";

	  ctx.fillRect( 230, 680, 100, 100 );
      }
    </script>
  </head>
  <body>
    <h1>test0000</h1>
    <canvas id="cvs1" width="1000" height="1000" style="border:4px solid;"></canvas>
  </body>
</html>

いじょ。

広告

JavaScript,tec