HTML5 Canvasで角丸四角を描いて、グラーデーションで塗り潰してみたCanvasでチャートを作成していた時に、背景やらグラフの帯やらで角丸四角をたくさん描画する必要があったので、共通化して１つの関数にまとめましたので紹介していきます。 サンプル 作ろうとしているものがこちらになります。 「サイズ」「色」等のパラメータを変更すると、角丸四角が生成されるので試してみてください。 これより、このサンプルの実装方法について紹介していきます。 各種ファイルを準備 以下のようにファイルを準備します。 ┣ index.html ┗ js ┗ main.js index.htmlの記述 index.htmlは以下のように記述しておきます。 【index.html】 <html> <head> <meta charset="utf-8"> <script src="js/main.js"></script> </head> <body> <div> <canvas id="
