ベストアンサー
OGNさん >･･･Canvasに描画した図形（四角形、三角形 等）を塗りつぶす方法･･･････ Canvasで図形を塗りつぶすには、AI 回答のように、最初から塗りつぶす色を決めて図形を書きます。 色を変えるには、改めて色を指定し直して図形を書きます。 参考↓ https://www.tohoho-web.com/html/memo/canvas-2d.htm#fillRect https://www.tohoho-web.com/html/memo/canvas-2d.htm#fill
この回答はいかがでしたか？ リアクションしてみよう
質問者からのお礼コメント
ありがとうございました、他の機能もご紹介いただき感謝しております。
お礼日時：2024/9/11 13:29
その他の回答（3件）
求めている内容はAI回答のようなものではなく、おそらくドローイングソフトのバケツ機能（指定した座標につながる同じ色の領域を指定した色で全て塗りつぶす）だと思うのでそれについて書いておきます。 「フラッドフィルアルゴリズム」を調べてみてください。 適当に書いたサンプルを置いておきます https://playcode.io/2000929 とりあえずfloodFill、getPixelColor、colorMatchをコピペすれば使えるはずです。
AIからのお助け回答
JavaScriptでCanvasに描画した図形を塗りつぶすには、`fillStyle` プロパティを使用して塗りつぶしの色を設定し、`fill()` メソッドを呼び出します。以下は四角形と三角形を塗りつぶす基本的な例です。 ```javascript // canvas要素を取得 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 四角形を塗りつぶす ctx.fillStyle = 'red'; // 塗りつぶし色を赤に設定 ctx.fillRect(2020150100); // xywidthheight // 三角形を塗りつぶす ctx.beginPath(); // パスを開始 ctx.moveTo(20050); // 頂点の座標 ctx.lineTo(250150); // 次の頂点の座標 ctx.lineTo(150150); // 次の頂点の座標 ctx.closePath(); // パスを閉じる ctx.fillStyle = 'blue'; // 塗りつぶし色を青に設定 ctx.fill(); // 塗りつぶし ``` このコードでは、`fillRect` メソッドを使用して四角形を直接塗りつぶし、三角形についてはパスを定義して `fill` メソッドで塗りつぶしています。
JavaScriptのCanvasに描画した図形を塗りつぶすには、fillRectメソッドやfillメソッドを使用します。 ・四角形を塗りつぶす場合 ctx.fillRect(xywidthheight); xとyは四角形の左上の座標、widthとheightはそれぞれ幅と高さを指定します。 ・三角形を塗りつぶす場合 ctx.beginPath(); ctx.moveTo(x1y1); //三角形の最初の点 ctx.lineTo(x2y2); //次の点 ctx.lineTo(x3y3); //最後の点 ctx.closePath(); ctx.fill(); beginPathでパスを開始し、moveToとlineToで三角形の各頂点を指定します。closePathで最初の点に戻り、fillで塗りつぶします。 その他の図形でも同様に、beginPath、moveToとlineToで図形を描き、fillで塗りつぶすことができます。
この回答は生成AIで作成したものであり、最新性や正確性等を保証するものではありません。その他注意事項はこちら
