A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
#2です。
訂正です。赤枠ではなく緑枠でした。
少し修正しました。クリックするたびポイントとなる点を付けました。
そしてオブジェクト指向っぽく書きました。
初心者ならなおさら、目に触れておくべきです。
(全角空白は半角に置換してください。
文字数制限に余裕があったので余白も無駄に使ってみました)
<!DOCTYPE hrml>
<meta charset="utf-8">
<title></title>
<style>
canvas { border: 2px green solid; }
</style>
<body>
<canvas width="200" height="200"></canvas>
<canvas width="200" height="200"></canvas>
<canvas width="200" height="200"></canvas><br>
<canvas width="200" height="200"></canvas>
<canvas width="200" height="200"></canvas>
<canvas width="200" height="200"></canvas><br>
<script>
class MS {
constructor (canvas) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.reset ();
}
handleEvent (event) {
let {offsetX: x, offsetY: y} = event;
this.m.push ([x, y]);
this.arc (x, y, 3);
switch (++this.cnt) {
case 2 :
this.line (...this.m[0], ...this.m[1]);
break;
case 3 :
this.m.forEach ((p, i)=>
this.line (...p, ...this.m[(i+1)%3]));
this.surface ();
this.reset ();
break;
}
}
reset () {
this.cnt = 0;
this.m = [ ];
}
draw (ps, c = 'red') {
let ctx = this.ctx;
ctx.beginPath ();
ctx.moveTo (...ps[0]);
ps.forEach (([x,y])=>ctx.lineTo (x,y))
ctx.fillStyle = c;
ctx.fill ();
}
arc (x = 0, y = 0, r = 1, c = 'violet') {
let ctx = this.ctx;
ctx.beginPath ();
ctx.arc (x, y, r, 0, Math.PI * 2);
ctx.fillStyle = c;
ctx.fill ();
}
line (x0 = 0, y0 = 0, x1 = x0, y1 = y0, c = 'red') {
let ctx = this.ctx;
ctx.beginPath ();
ctx.moveTo (x0, y0);
ctx.lineTo (x1, y1);
ctx.strokeStyle = c;
ctx.stroke ();
ctx.closePath ();
}
surface () {
let
[[x1, y1], [x2, y2], [x3, y3]] = this.m,
S = Math.abs ((x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3)) / 2;
this.draw (this.m, 'rgba(255,0,0,.1');
alert (`面積は、${S} です`);
}
static create (canvas) {
let obj = new this (canvas);
canvas.addEventListener ('mousedown', obj, false);
return obj;
}
};
//________________
let canvas = document.querySelectorAll ('canvas');
canvas.forEach (e=> MS.create (e));
</script>
No.2
- 回答日時:
全角空白は半角に置換してください。
コードは最低限の記述で済ませています。
赤枠の3か所クリックすると面積が求められます。
初心者に毛が生えたような私にも、ハードルが高い気がします。
(漠然とした問いにもエスパー力を発揮!)
<!DOCTYPE hrml>
<meta charset="utf-8">
<title></title>
<style>
canvas { border: 1px green solid; }
</style>
<body>
<canvas width="600" height="600"></canvas>
<script>
const P = {
handleEvent: function (event) {
let {offsetX: x, offsetY: y} = event;
this.m.push ([x, y]);
if (3 === ++this.cnt) {
this.surface ();
this.reset ();
}
},
reset () {
this.cnt = 0;
this.m = [ ];
},
draw (ps, c = 'red') {
let ctx = this.ctx;
ctx.beginPath ();
ctx.moveTo (...ps[0]);
ps.forEach (([x,y])=>ctx.lineTo (x,y))
ctx.fillStyle = c;
ctx.fill ();
},
surface () {
let
[[x1, y1], [x2, y2], [x3, y3]] = this.m,
S = Math.abs ((x1 - x3) * (y2 - y3) - (x2 - x3) * (y1 - y3)) / 2;
this.draw (this.m);
alert (S);
},
demo (canvas) {
canvas.addEventListener ('mousedown', this, false);
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.reset ();
}
};
P.demo (document.querySelector ('canvas'));
</script>
No.1
- 回答日時:
こんにちは
ご質問があまりにも漠然としているので、何がわかっていて、何がわからないのかもサッパリわかりません。
なので、ごく大雑把に。
◇canvasで線などを描画するスクリプトの例
https://tsuyopon.xyz/2018/09/14/how-to-create-dr …
https://www.otwo.jp/blog/canvas-drawing/
後で、面積を求めたければ、この時の各点の座標を配列などに記憶しておいて、最後に多角形の面積として算出すれば良いでしょう。
UIによっては、逐次各項を計算で求めていっても良いですが…
(そうすれば、全座標を記憶する必要はなくなります)
◇多角形の面積の求め方
https://keisan.casio.jp/exec/system/1377138797
必ず、閉鎖図形として計算する必要があります。
また、辺同士が交差するような多角形の場合は、裏返った部分が負の面積になりますのでご注意。
単位をどのように設定するのかも不明ですけれど、適切な倍率などを設定すれば宜しいかと。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- iOS Windows OSにおける、ショートカットキーを受け取るソフトウェアの決定 5 2022/11/27 16:05
- その他(スマートフォン・携帯電話・VR) スマホの操作について 3 2022/08/28 21:47
- JavaScript API連携のプログラミングについて(Typescript) 2 2023/05/03 11:00
- その他(資産運用・投資) 投資信託の積立投資の取得単価 3 2022/08/31 16:48
- マウス・キーボード real vnc viewer で遠隔先で操作が出来ない。 2 2023/07/24 15:00
- JavaScript javaScriptで画面に値を入れるには 1 2022/08/14 12:27
- JavaScript javascript で外部サイトにデータ入力させて自動でボタンを押すことは可能ですか? 1 2023/01/30 16:23
- 美術・アート クリップスタジオペイントについて。 1 2022/11/08 15:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
SQLのWHEREで全てを質問する方法
-
新しいウィンドゥを最大化で立...
-
小窓を表示する時に、必ず右上...
-
window.openでフルスクリーン表...
-
<a href="#" …>の意味を教えて...
-
bodyにidをつける理由は何ですか?
-
openerの関係が崩れてしまった...
-
undefinedが表示されてしまう
-
jQuery GalleryViewスライドショー
-
外部ファイルでBODYのonloadイ...
-
(Javascript)印刷するファイル...
-
インラインフレームをドラッグ...
-
フレームを解除する方法
-
wordpressでアコーディオンメニ...
-
プルダウンメニューを別ファイ...
-
相対パスと絶対パスの速度
-
twitter widgetが表示されない
-
CSSでテキストを開いてふわっと...
-
javascriptとApacheの設定
-
時間によってリンク先を変える...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
新しいウィンドゥを最大化で立...
-
あなたのXAMPPのdashboard内のj...
-
SQLのWHEREで全てを質問する方法
-
htmlファイルを開いた時の画面...
-
外部からのjs呼び出しについて。
-
window.openで404エラーがでます
-
window.openでフルスクリーン表...
-
サブウインドウの高さを自動で...
-
小窓を表示する時に、必ず右上...
-
町内会での不倫
-
サブフレームがうまく出来ません。
-
別ウィンドウをサイズ指定するには
-
javascriptでのポップアップ表...
-
いろんなサイズの新しいウィン...
-
色の指定で配列を使いたい
-
ポップアップブロック付きのブ...
-
IF文で該当の処理を通らない
-
ビルダーで小窓にスクロールバ...
-
モニターサイズによるページ振...
-
JAVAでリンクボタンを作成して...
おすすめ情報