Tag: js

【Javascript】線の点・太さ(lineWidth)から、輪郭の座標を算出する

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

【JS】Canvasで丸や四角で「消す」方法

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

js の正規表現で、「完全一致」でマッチする

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

voidを使えば、アロー関数 で{}が省ける。

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