こんにちはー。更新が遅れてしまいすみません。 あけましておめでとうございます。今年もよろしくお願いします。 今回は、線の点・太さから、輪郭の座標をとる方法を紹介します。HTML5 Canvas の stroke() メソッドを、SVG などを使わず、自分で実装する感じです。 なお、自分で考えて手探りでやってみた方法なので、もっと効率のいい方法があるかもしれません。 なぜやりたいのかmatter.js というライブラリがあり、それを使って、マウスで書いた線を Body に変換したかったのですが、線を Body に直接することができなかったので、作ろうと思いました。 Constant とか使えばで … Read More

こんにちはー。題名のとおり、Canvas の「消す」機能で、丸などに形を変える方法を紹介します。 「消す」機能についてまずはじめに、消す方法としてのルールを書いておきます。 白く塗る はダメ！（背景が白でない場合があるため） 消した部分は透明になるようにする。 実装のポイントcontext の globalCompositeOperation を、destination-out に変更すると、fill や stroke で指定した領域を 切り取る ことができます。 また、このプロパティは、その他いろいろな値に変更できます。 サンプル：円形で消すglobalCompositeOperatio … Read More

こんにちはー。 機会があって、正規表現で「完全一致」のテストの方法が知りたくなりました。今日はその方法を紹介します。 どういうことがしたいのか12/abcde/.test("abcde"); // true/abcde/.test("abcdef"); // これも true このような場合だと、１行目のようなテストする文字列がパターンと同じ場合、 true になりますが、含んでいる場合（２行目）も true になってしまいます。これを、２行目が false になって、１行目だけ true になるようにしたいんです。 完全一致したいときhttps://developer.mozilla.org … Read More

こんにちはー。 今、void を使えばアロー関数で｛｝がいらないんじゃないか説が、ふと頭のなかを通り過ぎて行きましたので紹介いたしますー。 「void 演算子で、アロー関数の {} がいらない気がする」ということです。 普通に {} はずせばいいのでは？まず、通常のアロー関数の｛｝なしの使い方です。普通の関数がどんどん短くなっていく過程をご覧ください。1234567891011// function 式var a = function (a) { return a + 2; };// アロー関数にそのまましてみたvar a = (a) => { return … Read More