走者、打球を表す図を描く「野球模式図メーカー」

子供に野球のルールや作戦を教えるために、走者や打球に関する図を簡単に描く仕組みを作りました。
走者、打球の飛んだ位置、打球の種類を指定するだけで模式図を描きます。
野球教室」はこれを使って作りました。

野球模式図メーカー

例えば走者一三塁でライトフライだと次のような図になります。

baseball diagram maker

画像はSVGで作られます。コードも表示されるので、ブログなどの記事に貼り付けるだけでOKです。

<svg width="300" height="157" viewbox="-5 -5 210 110">
<polyline points="0,50 100,100 200,50" fill="none" stroke="black" />
<polyline points="50,75 100,50 150,75" fill="none" stroke="black" />
<circle r="4" fill="blue" cx="150" cy="75" />
<circle r="4" fill="blue" cx="50" cy="75" />
<path d="M100,100 Q133,-23 165,35" stroke="red" fill="none" />
</svg>

コメント

タイトルとURLをコピーしました