私は素晴らしい塗装アプリを作成した反応とキャンバスAPIを使用して

私はちょうどHashnode Christmas hackathonのためにこのアプリを提出したので、私は詳細にここで詳細について話をしたい.
私はHTMLキャンバスとCanvas APIで働く機会がなかったので、このハッカーは私にそれに飛び込む正当な理由を与えました.
私も、より多くの魔法を作るためにユニークな何かを加えたかったです、それで、ダイナミックなカラーブラシとダイナミックな幅ブラシを加えました.この効果は、より多くの魔法と夢のように見えると判明します.

テックスタック

反応(習慣反応フックで)

キャンバスAPI

ネイティブカラーピッカーと範囲入力

フォント素晴らしいアイコン

netlifyホスティング
イントロスクリーン
私は主にフロントエンドの開発者と私は設計と詳細に特別な注意を払っているので、私はアプリのための素晴らしいスプラッシュ画面を作成したいと思った.私は水彩画とペイントセットボックスのデザインに触発されました.

私は学校のためのペイントセットを買っていたとき、私はボックス上の画像に感動した覚えている.彼らは美しい絵を見せて、基本的に「あなたはこのセットでこの美しいイメージを描くことができます」と伝えていました.それで、私はスプラッシュスクリーンでその感覚を模倣したかったです.

どのように見出しテキストにグラデーションをオーバーラップしたのか不思議に思うなら、ここにコードスニペットがあります.

  background: linear-gradient(
    90deg,
    hsl(0, 100%, 50%),
    hsl(211, 100%, 50%) 50%,
    hsl(108, 100%, 40%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

カスタムフック
私は、ブラシを切り替えるために必要な状態と機能の束を返すcustom hookを使用して、イベントリスナーとキャンバスAPIとのペインティング機能を追加しました.

ダイナミックカラーとブラシ幅
これは魔法が起こるところです.マジックブラシモードでは、各ペイントイベントのHSL色の色相値をシフトしています.結果の効果は素晴らしい色のグラデーションです.また、より多くのオプションと気分の色グラデーション飽和と明るさを変更するコントロールを追加しました.

ctx.current.strokeStyle = `hsl(${hue.current},${selectedSaturation.current}%,${selectedLightness.current}%)`;
ctx.current.globalCompositeOperation = "source-over";

hue.current++;

if (hue.current >= 360) hue.current = 0;

マジックブラシモードと同様に、私はまた、動的な幅のモードを変更するブラシのサイズの値を上下に最小値と最大値の間を追加しました.マジックブラシモードと組み合わせると、いくつかの素晴らしいアートやエフェクトを作成することができます.

  const dynamicLineWidth = useCallback(() => {
    if (!ctx || !ctx.current) {
      return;
    }
    if (ctx.current.lineWidth > 90 || ctx.current.lineWidth < 10) {
      direction.current = !direction.current;
    }
    direction.current ? ctx.current.lineWidth++ : ctx.current.lineWidth--;
  }, []);

アプリデモ
https://magic-painter.netlify.app/

ソースコード

codeAdrian / react-magic-painter

ポストアートは、アプリケーションでは、コメントを作成します!)
あなたがHashNodeのために私のHackathonプロジェクトでこのポストを楽しんだならば、dev

My Resolve 2021 - DO Hackathon submission

Adrian Bece ・ Jan 4 ・ 5 min read

#dohackathon #showdev #react #webdev

これらの商品はコーヒーによって製造されている.それで、あなたが私の仕事を楽しんで、それが役に立つとわかるならば、私にコーヒーを買うことを考えてください!私は本当に感謝します.

このポストを読む時間を割いてくれてありがとう.あなたがこれを見つけたならば、それを与えてください❤️ or 🦄, 共有とコメント.