hudeはHTML Canvasのためのラッパーです。メソッドチェーンが可能なのでシンプルな記述でキャンバスに描画できます!
hudeを開発した理由は単純で、よりシンプルな記述でキャンバスに描画したいと思ったからです。 例えばキャンバスの**に円を描画したいとき、 従来通りならば、
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
となりますが、hudeであれば
Hude.mount(canvas).center().circle(radius).fill('red');
とするだけで描画できます!
widthとheightを指定できます。 指定しなかった場合はデフォルトの大きさ(300x150)です。
const h = Hude.build(width, height);
引数にはCSSセレクタを使用してください。 widthとheightを指定するとマウントするときに指定したサイズに変更します。 指定しなかった場合はサイズは変更されません。
const h = Hude.mount('#canvas', width, height);
Hude.rad(degrees);
Hude.deg(radian);
操作対象のキャンバスのプロパティを取得するためのいくつかのゲッターが存在します。
const h = Hude.build(100, 100);
const canvas = h.$c;
const h = Hude.build(123, 456);
const width = h.$w;
const height = h.$h;
console.log(width);
console.log(height);
出力はこうなるよ
123
456