JavaScriptのCanvasに描画した図形(四角形、三角形...
发布时间:2026-09-20 | 浏览:1
2024/9/10 14:01
JavaScript ・ 160 閲覧
2024/9/10 20:23
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
2024/9/10 21:09
求めている内容はAI回答のようなものではなく、おそらくドローイングソフトのバケツ機能(指定した座標につながる同じ色の領域を指定した色で全て塗りつぶす)だと思うのでそれについて書いておきます。 「フラッドフィルアルゴリズム」を調べてみてください。 適当に書いたサンプルを置いておきます https://playcode.io/2000929 とりあえずfloodFill、getPixelColor、colorMatchをコピペすれば使えるはずです。
質問者 2024/9/11 13:29
ありがとうございました、今後の参考にさせていただきます。
JavaScriptでCanvasに描画した図形を塗りつぶすには、`fillStyle` プロパティを使用して塗りつぶしの色を設定し、`fill()` メソッドを呼び出します。以下は四角形と三角形を塗りつぶす基本的な例です。 ```javascript // canvas要素を取得 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 四角形を塗りつぶす ctx.fillStyle = 'red'; // 塗りつぶし色を赤に設定 ctx.fillRect(20, 20, 150, 100); // x, y, width, height // 三角形を塗りつぶす ctx.beginPath(); // パスを開始 ctx.moveTo(200, 50); // 頂点の座標 ctx.lineTo(250, 150); // 次の頂点の座標 ctx.lineTo(150, 150); // 次の頂点の座標 ctx.closePath(); // パスを閉じる ctx.fillStyle = 'blue'; // 塗りつぶし色を青に設定 ctx.fill(); // 塗りつぶし ``` このコードでは、`fillRect` メソッドを使用して四角形を直接塗りつぶし、三角形についてはパスを定義して `fill` メソッドで塗りつぶしています。
JavaScriptのCanvasに描画した図形を塗りつぶすには、fillRectメソッドやfillメソッドを使用します。 ・四角形を塗りつぶす場合 ctx.fillRect(x, y, width, height); xとyは四角形の左上の座標、widthとheightはそれぞれ幅と高さを指定します。 ・三角形を塗りつぶす場合 ctx.beginPath(); ctx.moveTo(x1, y1); //三角形の最初の点 ctx.lineTo(x2, y2); //次の点 ctx.lineTo(x3, y3); //最後の点 ctx.closePath(); ctx.fill(); beginPathでパスを開始し、moveToとlineToで三角形の各頂点を指定します。closePathで最初の点に戻り、fillで塗りつぶします。 その他の図形でも同様に、beginPath、moveToとlineToで図形を描き、fillで塗りつぶすことができます。
この回答は生成AIで作成したものであり、最新性や正確性等を保証するものではありません。その他注意事項は こちら
以下のサイトで開発者ツールを開きたいです(目的は埋め込まれてるmp4をdownloadhelperという拡張機能orその他の手段で保存すること)https://gojo2.xyz/sp-qengbt1/(埋め込まれてる動画はサイト運営してる人のものではないです)pass:nade他の人に質問したところ以下↓のサイトのもので保護されてるとのことhttps://getwpshield.com/plugins/content-protector/https://getwpshield.com/docs/content-protector/protectors-cp/overview
https://kyu-core.com/こちらのサイトのメインビジュアル部分をどのように動かしているかわかる方いますか?jsのライブラリとかでしょうか?詳しくなくてすみません。Webで検索してもどのように検索すればよいのかわからず、ヒットしません。もし類似のjsライブラリや記事などがあれば教えていただきたいです。
以下のようなタイマーを止めるコーディングって、実際の開発のどういう場面で使われることが多いですか?よく使われますか?{constpElement=document.querySelector('p');constbuttonElement=document.querySelector('button');lettimeoutId;//再帰関数functionshowClock(){timeoutId=setTimeout(()=>{pElement.textContent=newDate();showClock();},1000);}buttonElement.addEventListe...
GoogleスプレッドシートのAppsScriptについて質問です。AppsScriptを使い以下の事をやりたいです。--------------①.任意のA列のセルに文字列を入力すると、その右隣のセルに現在の年月日、さらにその右隣のセルに現在の時間が自動入力される。具体例→A1に"たこ焼き"と入力すると、B1に年月日、C1に時間が入力される。②.①でA列のセルに入力した文字列を削除すると、その右隣のセルに入力された年月日とさらにその右隣のセルの時間が削除され、さらにその右隣のセルに先ほど削除した文字列、さらにその右隣のセルに現在の年月日、さらにその右隣のセルに現在時間が自動入力される。...
JSで以下のためのコードを教えて下さい。GoogleChromドキュメントで数字を反転してCtrlと+と.の、3つを同時押しすると数字が右肩に付くのですが、同時にページ全体の文字の倍率が大きく変化してしまいます。元の倍率に戻すのは手間なので、倍率を変化させないように指定したいです。
Typescript、react、next.jsを勉強したいのですが、どう勉強していけばいいのかご教示いただければうれしいです。「作って学ぶNext.js/ReactWebサイト構築」の書籍を一回読んだのと、YouTubeでしまぶーのIT大学チャンネルの「Next.jsと一緒に学ぶReact講座」の動画をみたのですが、難しくて理解できませんでた。
GoogleスプレッドシートのAppsScriptについて質問です。AppsScriptを使い以下の事をやりたいです。--------------①.任意のA列のセルに文字列を入力すると、その右隣のセルに現在の年月日、さらにその右隣のセルに現在の時間が自動入力される。具体例→A1に"たこ焼き"と入力すると、B1に年月日、C1に時間が入力される。②.①でA列のセルに入力した文字列を削除すると、その右隣のセルに入力された年月日とさらにその右隣のセルの時間が削除され、さらにその右隣のセルに先ほど削除した文字列、さらにその右隣のセルに現在の年月日、さらにその右隣のセルに現在時間が自動入力される。...
GoogleAppsScript(GAS)スクリプトエディタの文字サイズを変更する方法でfontと入れると文字が変えられます。固定する方法を教えてもらえますか?リロードすると、戻ります。
スプレッドシートについてAppsScriptでスクリプトをいくつか設定しているのですが、その影響で、スプレッドシート内で[操作を一つ巻き戻す]ボタンを押しても戻りません。スクリプトを保持したまま、巻き戻しを押してもちゃんと操作が一つ戻るようにする方法を教えてください。
webapiを探していますseleniumを使わないで、jsを実行した後のHTMLを取得したいんです。調べてみても,seleniumを使う記事しか見つかりませんでした。一応phantomjscloud.comあたりに目星を付けているのですが、それ以外の案とかってありますか?
転職について相談したいです。 神奈川勤務の32歳 電子機械の設計開発を従事してきました。 現職は人間関係で困っており、事業自体も雲行き怪しいので、転職活動をしました。 残念ながら、30社ほど...
applecare +の加入期限って購入日から30日なのか、アクティベーション日から30日なのかどちらなのですか?
超節約術と言うサイトの解約が出来ず困っています。 解約方法をわかる方教えて下さい。 宜しくお願い致します。
立正佼成会の会員は、どうして日蓮宗総本山の身延山久遠寺に参詣するのでしょうか?
2時間前くらいにアンチトラガスを開けたんですけど、シャフトが短すぎると思うんです。長いのに変えた方がいいですか? 現在は14G10mmのバナナバーベルを使用しています。また、変える場合は12mm...
失業保険で質問です。 待機期間中にハローワークを通さないで転職先が決まった場合についてです。 決まった転職先は10月末までの短期雇用ですが、雇い主とこちらの合意があればその先も継続雇用の可能性が...
sK2のミラクルドロップのポイントを社会貢献に寄付 する場合のやり方を教えてください
ASMRについて質問です。 現在DLsiteで睡眠向けのASMRを探しています。 耳かき、ヘッドスパ系が好きですが寝れそうな落ち着きのあるASMRであればどんなものでもかまいません。
大学生へのプレゼントについて質問です。高校3年生何ですけど、大学生の彼氏にピアスをプレゼントしたいと考えているのですが、予算1万円くらいでおすすめのブランドを教えてください。
Laka フルーティーグラムティント 104 チェリー が大好きなのですが、CHANELのリップで1番似てる色はなんだと思いますか?
猪俣周杜くんのことこんなに好きなのにこんな辛いことありますか。 現実ですか。ご飯食べれません。手が震えます 私が彼の知人だったら私のことどれだけ殴ってもどれだけ手を出されても許してたのに彼がまたアイドルとしてキラキラの人生を歩むことは無理ですか
先日Netflixにて配信されたダウンタイムで質問です。 一応ネタバレ注意ですm(_ _)m最終話で文と廉(借金取りの人)が病院にて手を握りあったシーンがあったと思うのですが、2人は両思いなのでしょうか?
Netflixオリジナルドラマ「ダウンタイム」を見ようとしているのですが、気まづいシーンなどはありますか?
しぐれういさんというVTuberが炎上していますがあまりVTuberに詳しくないので今回の炎上について解説してください
Safariで85poを閲覧しようとしたらこのようにブロックされてます。 閲覧する方法はあるのでしょうか?
今回の台風25号で新幹線は通常通り運行すると思いますか? また、過去の台風では強風域に入るくらいでは運行していましたか?
タイムレス猪俣の件で思い出したんですけど、昔篠塚くんがめざましテレビで大きな古時計の替え歌で「おじいさんにトドメ」で炎上したじゃないですか。あれはなんで炎上したんですか?トドメって替え歌がやばかった?
9月21日 台風25号 新幹線止まるんですかね、、 21日の朝9時頃 彼氏が熊谷から軽井沢まで新幹線で遊びに来ます。 台風直撃というのを一昨日知ったので、驚いたのですが、、彼氏は夜10時頃帰る予定です。 親は台風やばいよーって言われてるのでどうしようか迷ってます。 今日新幹線のチケット買うらしいの...
よく分からないので教えてください。「NPB(日本野球機構)は15日の公示を発表。西武は中村剛也選手を「NPB感染症特例」の対象選手として登録抹消とした。」ということはつまり、西武の中村剛也選手がコロナウイルスやインフルエンザにかかったということですか?
バスケットボール日本代表 アジア大会 こないだまでやってたオリンピック予選と、全然メンバー違うのはなぜですか? これが準決勝スタメン
ログインボーナス 0 枚獲得!
※一度に投稿できるURLは5つまでです
※氏名やメールアドレスなどの個人情報は入力しないでください