Canavsに三角形を描画します。
HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。
『三角形』を描画する
実行例
二等辺三角形を描いています。
ctx.moveTo()
で始点まで移動、その後ctx.lineTo()
で指定した頂点の座標に移動しながら線を描くという非常にシンプルな処理になっています。
ソース
<canvas id="board" width="300" height="300"></canvas>
<script>
window.onload = ()=>{
const board = document.querySelector("#board");
const ctx = board.getContext("2d");
// 頂点の座標を用意
let p1 = {x:150, y:10}; // 上
let p2 = {x:10, y:280}; // 左
let p3 = {x:280, y:280}; // 右
ctx.beginPath();
ctx.moveTo(p1.x, p1.y); // 始点に移動
ctx.lineTo(p2.x, p2.y); // 左側の頂点まで線を描く
ctx.lineTo(p3.x, p3.y); // 右側の頂点まで線を描く
ctx.lineTo(p1.x, p1.y); // 始点まで線を描く
ctx.strokeStyle = "tomato"; // 線の色
ctx.lineWidth = 5; // 線の太さ
ctx.stroke();
ctx.fillStyle = "orange"; // 塗りつぶす色
ctx.fill(); // 塗りつぶし
}
</script>
参考ページ
- https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineTo
- https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/moveTo
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
同じカテゴリの記事
- [JavaScript] 連想配列に forEach を使用する
- [JavaScript] 配列の値が条件を満たすか検証する – some(), every()
- [JavaScript] 配列の全要素に処理を行い新しい配列を作成する – map()
- [JavaScript] 配列からひとつの値を生成する – reduce()
- [JavaScript] 配列から特定の要素だけを取り出す – filter()
- [HTML5] アドレスバーのURLを変更する – history.pushState()
- [HTML5] JavaScriptでtitleタグを変更する
- [HTML5] 要素をフェードアウト/フェードインする