Zenn
🎨

Javascript: canvasについて、基礎的な部分をまとめてみた。

2021/09/13に公開
HTML
JavaScript
tech

初めて記事を書きます。何事も挑戦。

お絵描きアプリを作りたい！ということでcanvasについて勉強しました。
復習がてら、学んだことの一部を記述していきます。

参考教材はドットインストールです。すごくわかりやすいです。

目次

1.canvasとは？

2.描いていく

- 図形を描く

- 直線を引く

- 画像の描画

canvasとは？

簡単に言うと、絵が描けてしまうAPIです。
htmlに<canvas></canvas>タグを記述します。
初期値
height: 150px
width: 300px

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>CANVAS！！</title>
</head>
<body>
  <canvas width="700px" height="700px" style="background-color: #35907f;">
    お使いのブラウザではcanvasが使用出来ません。
  </canvas>
  
  <script src="index.js"></script>
</body>
</html>

今回は縦横700pxの正方形にしました。
また、背景色を青緑色にしています。
canvas背景
こんな画面になりました。

描いていく

使用言語はjavascriptです。
大体x,yの座標の指定が必須な気がします。

const Draw=()=>{
const canvas = document.querySelector("canvas")
if(typeof canvas.getContext === "undefined"){
  return;
}
const draw = canvas.getContext("2d")
//以下にどう描画していくかを記述していく。
.
.
.
}
Draw() //描画を実行

描画する関数を定義し、中身を記述していきます。
最初にcanvas要素を取得しています。

if(typeof canvas.getContext === "undefined"){
  return;

この記述を行うことで、canvasが対応していないブラウザでは処理が止まります。

const hoge = canvas.getContext("2d")

2dはそのまま2dの意味です。3dにすることも出来ます。

このようにして下準備を行います。

図形を描く

四角形を描く

fillRect()とfillstrokeRect()を使います。
hoge.fillRect(x,y,width,height)
指定したx,y座標からwidth,height分塗りつぶす。
hoge.fillstrokeRect(x,y,width,height)
指定したx,y座標からwidth,height分の外枠を塗りつぶす。

hoge.fillRect(300,250,100,100) //上
hoge.strokeRect(300,400,100,100) //下

このようにすると
四角形

こうなります。

ちなみにfillRect()の前に

hoge.fillStyle="white"

と記述すると
白四角形

こうなります。

丸を描く

丸を描くにはarc()を使用します。
四角形を描く時と違って
描き初めにはbeginPath()が、描き終わりにはfill()もしくはstroke()が必要になります。

hoge.beginPath()
hoge.arc(350,350,100,0,2 * Math.PI)
hoge.fill()
hoge.beginPath()
hoge.arc(350,450,100,0,2 * Math.PI)
hoge.stroke()

beginPath()は描画の始まりを示し、fill()は塗りつぶし,stroke()は枠線を意味します。
実行すると
丸
こうなります。

今回は、四角計と丸を例に出してみました。

直線を引く

直線にはmoveTo(),lineTo()を使います。
moveTo(x,y) 描画の開始始点を決める
lineTo(x,y) 線を引く座標を指定
lineTo()を繰り返し使うことで、好きな形を作ることが出来ます。
今回は、ハートを描いてみます。

hoge.beginPath()
hoge.moveTo(200,100)
hoge.lineTo(240,100)
hoge.lineTo(270,140)
hoge.lineTo(300,100)
hoge.lineTo(340,100)
hoge.lineTo(370,140)
hoge.lineTo(370,180)
hoge.lineTo(340,220)
hoge.lineTo(270,270)
hoge.lineTo(200,220)
hoge.lineTo(170,180)
hoge.lineTo(170,140)
hoge.lineTo(200,100)
hoge.stroke()

ハート
こうなります。fill()にすると塗り潰されます。

ちなみに

hoge.lineWidth="5" //線の太さが5pxに
hoge.lineCap="round" //線の両端の形が丸くなる
hoge.lineJoin="round" //線の繋ぎ目が丸くなる

こうすると
ハート2
こうなります。

画像の描画

画像を表示させることも出来ます。

ねこ
この画像を表示させたい時

const img = document.createElement('img') //img要素を作る
img.src="img/cat.png" //パス指定
img.addEventListener('load', () ⇒{
hoge.drawImage(img, 200,200, 300,300) })
//(img,表示座標のx,y,サイズ指定width,height)}) ロードした後に、指定した座標にimg表示

ねこ２
こうなります。

ちなみに

img.addEventListener('load', () => { 
const pattern = hoge.createPattern(img, "repeat")
//repeat-x,reperat-y,no-repeatと指定できる。
hoge.fillStyle = pattern; 
	hoge.fillRect(0,0,canvas.width,canvas.height)　//x=0,y=0を開始にして画像でcanvasいっぱいに塗りつぶし
})

こうすると
ねこリピート
元画像がでかすぎて見切れてしまいました。キャンバスいっぱいを画像で埋め尽くすことが出来ます。

drawImage()を使って、一部分だけ切り出すことも出来ます。

これ以外にも様々なメソッドが存在します。点線にしたり、三角関数を使ってアニメーションをつけたり・・・
アウトプット&練習がてらの記事執筆でしたが、今後質のいいものを作れるよう学習を進めていきたいです。

Discussion