走者、打球を表す図を描く「野球模式図メーカー」
子供に野球のルールや作戦を教えるために、走者や打球に関する図を簡単に描く仕組みを作りました。
走者、打球の飛んだ位置、打球の種類を指定するだけで模式図を描きます。
「野球教室」はこれを使って作りました。
例えば走者一三塁でライトフライだと次のような図になります。
画像は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>
<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>
[ 2015年9月2日 | カテゴリー: Tool | タグ: SVG , 模式図 , 野球 ]
« VBAでクイックソート(改良版) | 「星勘定表メーカー」をリニューアル »
コメントを残す