Help us understand the problem. What is going on with this article?

【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);

参考

yktk435
ラズパイ、IoT、chrome拡張機能開発などなど
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away