Javascript/canvas

四角を描画するメソッド

ctx.strokeReact(X開始地点, Y開始地点, Width, Height);
線で四角を描画します。

ctx.fillRect(X開始地点, Y開始地点, Width, Height);
塗りつぶしの四角を描画します。

ctx.clearReact(X開始地点, Y開始地点, Width, Height);
四角でくり抜きます。

スタイルプロパティ
ctx.strokeStyle = "色";
線の色を指定します。

ctx.fillStyle = "色";
塗りの色を指定します。

ctx.lineWidth = 10;
線の幅を指定します。

ctx.lineJoin = "round" or "bevel" or "miter";
線の角を指定します。
代入する値は、'round'などを指定します。

ctx.lineCap = "butt" or "round", "square"
線の端の描画を変更する。
roundなどを指定すると線の端が丸みをおびます。

function s1Func(){
  var s1Canvas = document.getElementById("s1Canvas").getContext("2d");
  s1Canvas.lineWidth = 10;
  s1Canvas.strokeStyle = "pink";
  s1Canvas.strokeRect(0, 0, 100, 100);
  s1Canvas.fillStyle = "rgba(45,147,96,0.7)";
  s1Canvas.lineCap = "butt";
  s1Canvas.fillRect(50, 50, 100, 100);
  s1Canvas.clearRect(100, 100, 100, 100);
}

グラデーション
塗りのオブジェクトにグラデーションを追加する事も可能です。

ctx.createLinearGradient(X, Y, X, Y)
線形グラデーションのスタイル用オブジェクトを生成します。
最初のXYには、グラデーションの開始位置、次のXYにはグラデーションの終了位置を指定します。

ctx.createRadialGradient(X, Y, R, X, Y, R)
円形グラデーションのスタイル用オブジェクトを生成します。
最初のXYには、グラデーションの開始位置、次のXYにはグラデーションの終了位置を指定します。
Rには円の半径を指定します。

ctx.addColorStop(0.0, [color])
グラデーションのどの位置でどの色を発色するかを指定します。

影を付ける
ctx.shadowColor
影の色を指定します。

ctx.shadowOffsetX
影のX地点を指定します。

ctx.shadowOffsetY
影のY地点を指定します。

ctx.shadowBlur
影のぼかし具合を指定します。

透明度を指定する。
ctx.globalAlpha
0.0 ~ 1.0で透明度を指定します。

canvas内のオブジェクトの変形
オブジェクトを変形させる為には、オブジェクト生成前に変形具合を指定する必要があります。

ctx.scale(X.X, Y.Y)
オブジェクトを拡大・縮小さます。
指定のXYは0.8などの割合を指定します。

ctx.rotate(R)
オブジェクトを回転させます。
度で回転させたい場合は、決まり文句として下記を指定します。

  ctx.rotate(30/180*Math.PI);
回転させたい度数(ここでは30度)に180*円周率の値を割ってあげます。

ctx.translate(X, Y)
オブジェクトを移動させます。
アニメーションなどでも利用するメソッドになります。

function s2Func(){
  var s2Canvas = document.getElementById("s2Canvas").getContext("2d");
  g = s2Canvas.createLinearGradient(0, 0, 100, 100);
  g.addColorStop(0.0, 'red');
  g.addColorStop(0.5, 'blue');
  g.addColorStop(1.0, 'yellow');
  s2Canvas.fillStyle = g;
  s2Canvas.fillRect(10, 10, 100, 100);
}
	

線を描く

ctx.beginPath()
線を描く事を宣言します。

ctx.moveTo(X, Y)
線の開始位置をしていします。

ctx.lineTo(X, Y)
線の終着点を指定します。
moveToメソッドで指定した箇所からどこに向かって線を引くか指定するイメージです。

ctx.closePath()
終了点という事を明示的に宣言し、開始点に向けて線を引きます。

ctx.stroke()
strokeメソッドを実行されてはじめて線が描画されます。

ctx.fill()
線で書いた図形を塗りつぶしで描画します。

function s3Func(){
  var s3Canvas = document.getElementById("s3Canvas").getContext("2d");
  s3Canvas.beginPath();
  s3Canvas.moveTo(10,10);
  s3Canvas.lineTo(200,100);
  s3Canvas.lineTo(100,120);
  s3Canvas.closePath();
  s3Canvas.stroke();

  s3Canvas.beginPath();
  s3Canvas.moveTo(50,250);
  s3Canvas.lineTo(60,20);
  s3Canvas.lineTo(140,150);
  s3Canvas.closePath();
  s3Canvas.fill();
}
	

ctx.arc(X, Y, R, F1, F2)
曲線を描画します。
Xには中心点のX座標、Yには中心点のY座標、Rには描画する円の半径を指定します。

//左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
element.arc(150,75,60,Math.PI*1,Math.PI*2,true);

//一筆書きで星形のパスを描く
context.beginPath();
context.moveTo(90,60);
context.lineTo(210,60);
context.lineTo(110,130);
context.lineTo(150,20);
context.lineTo(190,130);
context.closePath();
    
element.fillText("文字列", 10, 180);
element.strokeText("文字列", 10, 100);