SYNCERのロゴ
アイキャッチ画像

欠けた円を描く方法

Canvasで欠けた円を描くには、arc()で円弧を引き、それと円の中心をlineTo()で結びます。

サンプルコード

arc()の引数で、開始角度と終了角度、方向(時計回り、反時計回り)を調整できます。arc()で円弧を引き、そこから円の中心までlineTo()で結べば、欠けた円をレンダリングできます。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// 角度
var startAngle = 75 ;
var endAngle = 225 ;

// A: (0〜angleA)
context.beginPath () ;
context.arc( 100, 100, 100, startAngle * Math.PI / 180, endAngle * Math.PI / 180, false ) ;
context.lineTo( 100, 100 ) ;
context.fillStyle = "red" ;
context.fill() ;

デモ

開始角度、終了角度、方向を調整して、どのように反映されるか確認してみて下さい。0度(開始位置)は上ではなく、右です。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

var startAngle = 75 ;
var endAngle = 225 ;

context.beginPath () ;
context.arc( 100, 100, 100, startAngle * Math.PI / 180, endAngle * Math.PI / 180, false ) ;
context.lineTo( 100, 100 ) ;
context.fillStyle = "red" ;
context.fill() ;

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月6日 (日)
コンテンツを公開しました。