おしえて

Canvasを使って描画して面積取得

締切済

質問者：ymoshimoshi
質問日時：2021/11/21 13:35
回答数：3件

教えて下さい。初心者です。
アプリケーション上でマウスの操作から描画して、面積取得するのに、javascriptとHTML5でどのようにコードを書けばいいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： babu_babu_baboo
回答日時：2021/11/24 00:49

#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>

- 1
- 件

通報する

No.2

回答者： babu_babu_baboo
回答日時：2021/11/21 17:18

全角空白は半角に置換してください。

コードは最低限の記述で済ませています。
赤枠の３か所クリックすると面積が求められます。

初心者に毛が生えたような私にも、ハードルが高い気がします。
（漠然とした問いにもエスパー力を発揮！）

<!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>

- 1
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2021/11/21 16:13

こんにちは

ご質問があまりにも漠然としているので、何がわかっていて、何がわからないのかもサッパリわかりません。
なので、ごく大雑把に。

◇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
必ず、閉鎖図形として計算する必要があります。
また、辺同士が交差するような多角形の場合は、裏返った部分が負の面積になりますのでご注意。

単位をどのように設定するのかも不明ですけれど、適切な倍率などを設定すれば宜しいかと。