JavaScript

[JavaScript] canvasに円を描画する(.arc)

投稿日:2017年11月8日 更新日:

canvasに円を描画するには、.beginPath().arc()を使用します。

サンプルソース

例)canvasに円を描画する

実行サンプル

上記サンプルの実行結果です。

構文

arcの構文です。

(arc構文)
arc(中心x座標, 中心y座標, 半径, 円弧の開始角, 円弧の終了角, 描画の方向)
中心x座標円の中心位置(px)
中心y座標円の中心位置(px)
半径半径(px)
円弧の開始角単位はラジアン
円弧の終了角単位はラジアン
描画の方向true:反時計回り false:時計回り(デフォルト)

解説

  • 円を描画する場合は、beginPathでパスを作ってから、arcメソッドで作画し、strokeで描画します。
  • 塗りつぶしたい場合はstrokeの代わりに、.fill()を使用します。
  • 角度からラジアンに変換するには、「角度xMath.PI/180」で求められます。
    例)60度⇒ 60*Math.PI/180

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


  1. カタヤマ ユウスケ より:

    実行してみました。3番目の円弧の左半分までしか表示されませんでした。
    コードを見ると、(400,100)を中心に、半径40の円弧を描くことになっています。
    これでは、”CANVAS”の幅が不足することが判りました。
    ”width”を「450」にすると、”実行結果”の通りになりました。
    ペーストしたコードを確認してもらうために、このようにしてあるのでしょう。
    ありがとうございました。

    • とら より:

      こんにちは
      表示しきれていないのは、サンプルの記述ミスでした。
      widthを450に修正させて頂きました。

      ご指摘ありがとうございます m(_ _)m

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 配列から要素を削除する

配列から要素を削除するサンプルです。 配列の全要素を削除する 配列の全要素を削除するには、ブランクで更新します。 [cr ...

[JavaScript] 数値を文字列に変換する時最もパフォーマンスが良い方法

数値を文字列に変換するには、以下3種類がありますが どれが最もパフォーマンスがよいか調べてみました。 [crayon-5 ...

[JavaScript] 要素にclassを追加・削除する(classList)

JavaScriptで、要素にclassを追加・削除するサンプルです。 サンプルソース 例)要素にclassを追加・削除 ...

[JavaScript] 一番初めにゼロでない数値を返す

複数の値で、一番初めにゼロでない値を返す書き方です。 サンプルソース 例)複数の値で一番初めにゼロでない値を返す書き方の ...

[jQuery] 画像アップロード時にプレビュー表示する(canvas版)

画像アップロード時にプレビュー表示するサンプルです。 ※canvas領域にプレビューします。 サンプルソース 例)画像を ...

スポンサーリンク