JavaScriptにおけるcanvasの利用方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptにおけるcanvasの利用方法について解説しています。canvasはHTML5で図形を描画する要素です。JavaScriptでcanvasを操作する方法、主なプロパティとメソッドを覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptにおけるcanvasの利用方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

canvasの利用方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

canvasとは

HTML5から追加された要素で、図形を描画したり、動かすこともできるので、ゲーム等にも多く利用されます。
ただし、使えないブラウザもあるので注意しましょう。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

canvasの使い方

<canvas></canvas>の領域をgetContext関数でオブジェクト化します。あとは、作成されたオブジェクトに対して操作すことで図形を描写することが出来ます。

以下に幾つか操作するためのプロパティとメソッドを記載します

■プロパティ
線の色 strokestyle
線の太さ lineWidth
線の端 lineCap
塗りつぶしの色 fillStyle
フォント font
shadowBlur
影の色 shadowColor
影の幅 shadowOffsetX
影の高さ shadowOffsetY
■メソッド
塗りつぶし四角形
fillRect(x, y, width, height)
x, y                :左上の視点
width, height   :縦横の長さ
塗りつぶしでない四角形 strokeRect(x, y, width, height)
x, y                :左上の視点
width, height   :縦横の長さ
arc(x, y, radius, startAngle, endAngle, anticlockwise)
      x, y                :中心の位置
      radius           :半径
      startAngle    :開始位置の角度(ラジアン単位で指定)
      endAngle     :終点位置の角度(ラジアン単位で指定)
      ※”Angle(角度) * Math.PI / 180″で算出できます)
      ※Angle(角度)右水平位置が”0″になります
      anticlockwise :描写していく方向(true→反時計回り、false→時計回り
lineTo(x,y)
開始

 

canvasを利用して図形を描画してみよう

<html>

  <head>

    <meta charset="UTF-8">

    <title>canvas JavaScript</title>

    <style type="text/css">

      html {

        font-size: 62.5%;

        text-align: center;

      }

      h1 {

        font-size: 4rem;

      }

      #canvas-area {

        width: 500px;

        height: 500px;

        margin: 0 auto;

        overflow: hidden;

      }

    </style>

  </head>

  <body>

    <h1>雪だるま</h1>

    <canvas id="canvas-area"></canvas>

    <script type="text/javascript">

      //描画コンテキストの取得

      var canvas = document.getElementById('canvas-area');

      if (canvas.getContext) {

        var context = canvas.getContext('2d');

        //キャンバスのサイズを取得

        const width= canvas.clientWidth;

        const height= canvas.clientHeight;

        //キャンバスのサイズ(CSSで指定したキャンバスのサイズをキャンバス内に反映)

        canvas.width = 500;

        canvas.height = 500;

        //図形のサイズを指定

        const body_size = 120;

        const face_size = 90;

        const eye_size = 10;

        const mouth_size = 60;

        const button_size = 20;

        //キャンバスの背景色

        canvas.style.backgroundColor = "rgb(0,255,255)";

        //胴体と顔を描く

        //色を指定する(白)

        context.fillStyle = "rgb(255,255,255)";

        //キャンバスの中心

        context.beginPath();

        context.arc(width/2, height - body_size - 30, body_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);

        context.arc(width/2, height - (body_size*2) - face_size, face_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);

        context.fill();




        //ボタンを描く

        //色を指定する(黄色)

        context.fillStyle = "rgb(255,255,0)";

        //体部分の中心に3つ

        for (var i = 1; i < 4; i++){

          context.beginPath();

          context.arc(width/2, height - (body_size*2) + ((button_size*2+5)*i) , button_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);

          context.fill();

        }

        //目を描く

        //色を指定する(黒)

        context.fillStyle = "rgb(0,0,0)";

        //顔部分の中心の少し上(左右)

        context.beginPath();

        context.arc(width/2 - 30, height - (body_size*2) - face_size - 15, eye_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);

        context.fill();

        context.beginPath();

        context.arc(width/2 + 30, height - (body_size*2) - face_size - 15, eye_size,0 * Math.PI / 180, 360 * Math.PI / 180,true);

        context.fill();




        //鼻を描く

        //色を指定する(黒)

        context.fillStyle = "rgb(0,0,0)";

        //顔部分の中心に描く

        context.beginPath();

        context.fillRect(width/2 - (10/2), height - (body_size*2) - face_size + 5, 10, 20);

        //口を描く

        //色を指定する(黒)

        context.fillStyle = "rgb(0,0,0)";

        //顔部分の少し下で右側から始まり反対で止まり、線だけ表示

        context.beginPath();

        context.arc(width/2, height - (body_size*2) - face_size + 5, mouth_size,0 * Math.PI / 180, 180 * Math.PI / 180,false);

        context.stroke();

        //帽子を描く

        //色を指定する(赤)

        context.fillStyle = "rgb(255,0,0)";

        //顔部分の少し下で右側から始まり反対で止まり、線だけ表示

        //回転させる

        //キャンバス自体を回転させて、絵を描く

        context.save(); //初めに今のキャンバス情報を取得

        // 起点をこれから描画する矩形の中心に移動させる

        context.translate(width/2 + 40, height - (body_size*2) - (face_size*2) - 40);

        // canvasを40度回転

        context.rotate(40 * Math.PI / 180);

        context.beginPath();

        //開始座標

        context.moveTo(00, height - (body_size*2) - (face_size*2) - 28);

        //一本目の線の終点

        context.lineTo(100, height - (body_size*2) - (face_size*2) - 28);

        //二本目の線の終点

        context.lineTo(50, height - (body_size*2) - (face_size*2) - 128);

        //終点と開始点を結んでしめる

        context.closePath();

        //描写

        context.fill();

        //キャンバスの情報を元に戻す

        context.restore();




        //テキストを表示

        context.strokeStyle = "rgb(100,100,255)";

        context.font = "20px 'MS ゴシック'";

        context.textAlign = "left";

        context.textBaseline = "top";

        context.strokeText("Hello JavaSclipt!", width/2 + mouth_size, height - (body_size*2) - face_size +30);

      }

    </script>

  </body>

</html>

 

まとめ

WEBで画像や図を扱う機会はとても増えています。canvasはよく利用される機能ですので、ぜひ身に着けてください。

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。