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

四角形を描く方法

Canvasでレクタングル(四角形)を描くには、コンテキストのrect()を利用しましょう。

サンプルコード

座標(50,50)に、横幅75、高さ50のレクタングルを描くサンプルコードです。線で描きたい場合はstroke系のメソッドを利用しましょう。

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

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

// レクタングルの座標(50,50)とサイズ(75,50)を指定
context.rect( 50, 50, 75, 50 )

// 塗りつぶしの色
context.fillStyle = "rgba(255,0,0,0.8)" ;

// 塗りつぶしを実行
context.fill() ;

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

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

// 線を描画を実行
context.stroke() ;

デモ

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

塗りつぶしと線

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

context.beginPath () ;

context.rect( 50, 50, 75, 50 ) ;
context.fillStyle = "rgba(255,0,0,0.8)" ;
context.fill() ;

context.strokeStyle = "purple" ;
context.lineWidth = 8 ;
context.stroke() ;

200x200のキャンパスです。

塗りつぶし

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

context.beginPath () ;

context.rect( 50, 50, 75, 50 ) ;
context.fillStyle = "rgba(255,0,0,0.8)" ;
context.fill() ;

200x200のキャンパスです。

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

context.beginPath () ;

context.rect( 50, 50, 75, 50 ) ;
context.strokeStyle = "blue" ;
context.lineWidth = 1 ;
context.stroke() ;

200x200のキャンパスです。

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