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

線を引く方法

Canvasで線を引くには、コンテキストのlineTo()を利用しましょう。

サンプルコード

座標のA(0,0)からB(200,200)までの対角線を引くサンプルコードです。線の色は"rgba( 255,0,0, 0.5 )"などで透明度を調整することもできます。

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

// パスをリセット
context.beginPath () ;

// 線を引くスタート地点に移動
context.moveTo( 0, 0 ) ;

// スタート地点から(200,200)まで線を引く
context.lineTo( 200, 200 )

// 線の色
context.strokeStyle = "red" ;

// 線の太さ
context.lineWidth = 10 ;

// 線を描画する
context.stroke() ;

デモ

座標などを変更して、どのように反映されるか確認してみて下さい。

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

context.beginPath() ;

context.moveTo( 0, 0 ) ;
context.lineTo( 200, 200 )

context.strokeStyle = "red" ;
context.lineWidth = 10 ;

context.stroke() ;

200x200のキャンパスです。

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