私の質問に関する多くのリソースが見つかりましたが、私は何をしようとしているのかについての高レベルの概要に基づいて意見を出したいと思います。Designing Color Customizer
基本的には、JavascriptとHTMLの組み合わせを使用して、友人のウェブサイト用のカスタマイザを作成しています。私はいくつかのHTML経験があると言うことから始めなければならないが、これは私がJavascriptを使っている初めてのことである（私はJavaに慣れている）。究極の目標は、カスタムオーダーを配置するために自転車の部品を選択して色を変更できるようにするカスタマイズツールのようなものです。
イメージファイルとして自転車のさまざまな部分を入手しました。私はカラーマップから色を選択できるように、http://jscolor.com/examples/#example-showing-hidingにあるこのjscolorカラーピッカーを使用しています。私の計画は、同じ写真のコピーの上に特定のパーツ（写真）を重ね、Photoshopのレイヤーのようにそれらのうちの1つだけを塗りつぶすことです。この方法では、画像ファイルの四角形全体を塗りつぶす代わりに、部品が正しい形状で塗りつぶされます。カーソルが動くと、色はリアルタイムで変化するはずです。完了すると、それらは部品を保存することができ、カラーレコードはバックエンドに保持されます。
私はJavascriptを使い慣れていて、HTMLに慣れていないので、これを正しい軌道に乗せるのはちょっと難しいことです。だから私は、HTML/Javascript/CSSで経験を積んだ人たちから、現在よりも良い軌道に乗るために正しい方向に向けるためのアドバイスを期待しています。私は何をしようとしているのかを「フレーズ」する方法がわからなかった。私はアドレッシングてる
3つの主要な部分：
異なるバイクのパーツをロードするためのHTMLボタンを使用して（基本的に別々の画像ファイルを読み込みます）。
jscolorピッカーから選択した部分の画像に色を追加します。
ユーザーが[保存]ボタンをクリックしたときの部品の状態の保存。
私はすでに私が何をしたいのかに似たいくつかのリードを見たようにフォーラムを検索していきますが、私はほとんど私のアプローチは、私が何をしようとしています何のために実行可能なようであるかどうかを知りたいです。
ありがとうございます！
ありがとうございます。私はSVGを使ってオブジェクト/パーツのアウトラインを取得しました。しかし、今では形状をよりよく定義しようとしています。私はアウトラインが適切に色付けされている、私はそれをより詳細にしたいので、私はパスをもう少し詳しく遊ばす必要があると思う。 – organizedchaos
まあ...私はSVGsでそれがexperincedではない:)。私の友人はこれに類似したサイドプロジェクトを行いました。彼はキャンバスに行った「アパレルカスタマイザ」を作っていました。 SVGもうまくいくと思います。がんばろう。 –
SVGは形状の正しい輪郭を正しく見かけますが、塗りつぶしの詳細が失われます。色で塗りつぶした形を見るのではなく、単色で塗りつぶした形の輪郭を見ています。形状の複雑な細部はすべて失われます。 :(...だから、私はSVGの設定を実験して詳細を保持しています。 – organizedchaos