【javascript】Canvasを使ってみる


準備

<canvas id="sample">

コンテキストオブジェクトを取得

let canvas = document.getElementById('sample');
let context = canvas.getContext('2d');

getContextの第1引数に何を渡すかでコンテキストオブジェクトの種類が決まる。

渡す値 説明
2d 2次元グラフィックスの描画に使用
webgl、webgl2 3次元グラフィックスの描画に使用

図形を書く

長方形

長方形の関数

種類 説明
fillRect(x,y,width,height) 長方形(色付き)
strokeRect(x,y,width,height) 長方形(枠線のみ)
clearRect(x,y,width,height) 指定された領域を消去し、完全な透明にする
//左から40上から60の位置に縦50横50の正方形を描く
context.fillRect(40,60,50,50);

参考