javaScript(canvas)で図形(イラスト)を作りたい

題名の件、簡単な図形を作れることは知っていますが、
簡易的なイラストとかを作ることはできるのでしょうか？

例えばイナズママークとか。
https://illust8.com/contents/1085

lineToを繋げて作れるかと思ったのですが、思うように線が引けません。
教えて頂きたくお願い致します。

質問者からの補足コメント

• 回答ありがとうございます。
  思ったように線を引けないというのは、
  
  例えば、座標を右に線を引くと、
  ctx.lineTo(80,0)と右に線を引けますが、
  続けて、
  ctx.lineTo(0,100),
  ctx.linTo(80,0)とやることで
  　______
  　　　　 |
  　　　　 |
  　　　　 |_______
  右に長さ80、下に長さ100、右に右に長さ80という、
  上記の様な線を引けるという感覚ですが、間違っているのでしょうか？
  私はこれで、線を繋げてイナズママークを作ろうとしました。
  ですが、線が思ったような方向や長さにならず当惑しました。
  
  そもそも座標点の概念がよくわかっていなのでしょうか？
  色々Webサイトを見ても基本的な書き方しかわからず、
  どうすれば自分の思った方向や長さに作れるか
  教えて頂きたくお願い致します。

  No.2の回答に寄せられた補足コメントです。 補足日時：2020/11/24 12:24

No.2 ベストアンサー 回答者： fujillin 回答日時： 2020/11/24 10:33

こんにちは

＞思うように線が引けません。
だけでは、「まったく線が引けない」から「違う位置に引けてしまう」など様々なので、「何がわからないのか」がわかりません。
「線を引く」だけのサンプルは、検索すればいくらでも見つかるでしょうから、「線を引くこと」はできているものと想定します。

デフォルトのcanvasの座標は、左上を原点として、右方向がx座標(増加）、下方向がy座標(増加）となっていますので、一般的な座標系とはy軸が逆転しています。（HTMLでの座標系と同様ですが…）
扱う上で面倒であれば、y軸を逆転して通常の方向にしたり、原点を中央に移動（や回転）することも可能です。

以下、「イナズママーク」での一例。
※ サイズはcanvasサイズに依存します。
※ 座標データはテキトーです。

<script>
{
let canvas = document.getElementById('canvas'),
cw = canvas.clientWidth,
ch = canvas.clientHeight,
u = Math.min(cw/40, ch/80),
ctx = canvas.getContext('2d');

let i, d = [[32,41],[19,41],[31,65],[3,33],[14,33]];

ctx.translate(cw/2, ch/2);
ctx.scale( u, -u);

ctx.fillStyle = '#FF0';
ctx.beginPath();
ctx.moveTo(-16, -32);
for(i=0; i<d.length; i++) ctx.lineTo(d[i][0]-16, d[i][1]-32);
ctx.fill();
}
</script>

この回答へのお礼

回答ありがとうございます。
座標データを理解したことにより無事イラストを作成できました。

お礼日時：2020/11/26 15:44

No.4 回答者： fujillin 回答日時： 2020/11/24 13:18

No2です。

＞続けて、
＞ctx.lineTo(0,100),
＞ctx.linTo(80,0)とやることで～～
出来上がった図を観察してみればわかるのではないかと思いますが・・・

lineTo(x, y)、moveTo(x, y) の x, y は、座標系の x値, y値 であって、ペンの移動量を示すものではありません。

https://developer.mozilla.org/ja/docs/Web/API/Ca …

No.3 回答者： tknakamuri 回答日時： 2020/11/24 12:45

>ctx.lineTo(0,100),

>ctx.linTo(80,0)とやることで
>　______
>　　　　 |
>　　　　 |
>　　　　 |_______
>右に長さ80、下に長さ100、右に右に長さ80という、
>上記の様な線を引けるという感覚ですが、間違っているのでしょうか？

なんかタートルグラフィック風ですね(^^;

lineToの座標は Canvasの左上が常に原点。
つまり、ひどく間違ってます。

No.1 回答者： くんこば 回答日時： 2020/11/24 08:12

点の座標が分かれば、描けると思いますけど？