Zenn
📘

【初心者向け 106】Miniproject JS paint app

2023/11/18に公開
JavaScript
初心者
tech

JS canvas

今日は、JSを使って、ペイントをするアプリケーションをclone-codingしました。
一番、勉強になったところは2つがあります。

OffsetX,OffsetY

絶対座標か相対座標かがとても分かりづらかったですが、私が理解したことを話しますと、距離を表す絶対みたいなイメージでした。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;

こちらのctxの座標をoffsetX,offsetYでチェックした結果、
0,0に近い結果が出ました。
ctxは恐らく、canvas領域の左上を基準(0,0)からの距離を値としてリターンするイメージでした。結局、要は基準が大事みたいなイメージでした。

Arrays.from

JSの文法は知っておりましたが、あまり使える機会がありませんでした。
Arrays.from()はgetElementByでリターンしたHTMLCollectionとquerySelectorAllでリターンしたNodeListをJSの配列に変換します。

const colorOptions = Array.from(
  document.getElementsByClassName('color-option')
);

colorOptions.forEach((color) => color.addEventListener('click', onColorClick));

よく使われるパターンでJSのforEach, filter,mapのような高段関数を活用するためです！！！

Discussion