HTMLとCSSとJavaScriptとPHP

canvas

canvas要素 3.矩形と円

canvas要素はscriptによって画像が扱える要素です。

矩形

HTMLは1.直線を引くと同じものを使用します。


window.onload=canvas_line;
function canvas_line() {
    /* <canvas>要素のノードオブジェクトの取得 */
    var canvas=document.getElementById('newcanvas');
    /* 未対応の場合処理終了 */
	if(!canvas.getContext){
		return false;
	}
    /* 描画用のオブジェクトを取得する */
    var canvas=document.getElementById('newcanvas');
    /* 未対応の場合処理終了 */
	if(!canvas.getContext){
		return false;
	}
    /* 描画用のオブジェクトを取得する */
    var cs=canvas.getContext('2d');
    /* 設定 */
	cs.fillStyle="#0000ff";     // 塗りつぶしの色 青
	cs.Style="#00ffff";         // 線の色 黒
	cs.lineWidth = 10;          // 線の太さ 10px
	
    /* 矩形を描く */
	cs.strokeRect(10,10,200,50);// アウトラインの矩形
	
    /* 塗りつぶした矩形を描く */
	cs.fillRect(10,70,200,50);  // 塗りつぶした矩形
	
    /* 線をつなげて矩形を描く */
	cs.beginPath();             // パスのリセット
	cs.moveTo(10,130);          // 開始位置
	cs.lineTo(10,180);          // 次の位置
	cs.lineTo(210,180);         // 次の位置
	cs.lineTo(210,130);         // 次の位置
	cs.closePath();             // パスを閉じる
	cs.stroke();                // 描画
	
    /* 塗りつぶした矩形を描く */
	cs.fillRect(10,200,200,50); // 塗りつぶした矩形
    /* 矩形で切り抜く */
	cs.clearRect(40,220,140,10);// 矩形で切り抜く
}
  1. strokeRect(x, y, w, h)はアウトラインで矩形を描きます。矩形の左上のx座標、y座標、幅、高さを指定します。W3C参照
  2. 線の太さを設定した場合、直線の時と同じで中心から左右均等に幅を取るので内側の面積が狭くなります。また、内側は塗りつぶされません。
  3. fillRect(x, y, w, h)は線なしで塗りつぶした矩形を描きます。矩形の左上のx座標、y座標、幅、高さを指定します。
  4. 四角形の場合はstrokeRect(x, y, w, h)やfillRect(x, y, w, h)もありますが線をつないで描画します。
  5. closePath()はパスを閉じます。W3C参照
  6. clearRect(x, y, w, h)は矩形で切り取ります。矩形の左上のx座標、y座標、幅、高さを指定します。

コメントが日本語で入っていますのでjavaScriptファイルの文字コードはHTMLファイルと同じものにしておいてください。

上記サンプルを開く

塗りつぶし


window.onload=canvas_line;
function canvas_line() {
    /* <canvas>要素のノードオブジェクトの取得 */
    var canvas=document.getElementById('newcanvas');
    /* 未対応の場合処理終了 */
	if(!canvas.getContext){
		return false;
	}
    /* 描画用のオブジェクトを取得する */
    var cs=canvas.getContext('2d');
    /* 設定 */
	cs.fillStyle="#0000ff";     // 塗りつぶしの色 青
	cs.Style="#00ffff";         // 線の色 黒
	cs.lineWidth = 10;          // 線の太さ 10px
	
    /* 矩形（パス）を描く */
	cs.beginPath();             // パスのリセット
	cs.rect(10,10,190,50);      // 矩形のパス
	cs.stroke();                // 描画
    /* 塗りつぶした矩形を描く */
	cs.beginPath();             // パスのリセット
	cs.rect(10,80,190,50);      // 矩形のパス
	cs.fill();                  // 塗りつぶし
    /* パスを描いてから塗りつぶし矩形を描く */
	cs.beginPath();             // パスのリセット
	cs.rect(10,150,190,50);     // 矩形のパス
	cs.stroke();                // 描画
	cs.fill();                  // 塗りつぶし
    /*塗りつぶしてからパスを描く */
	cs.beginPath();             // パスのリセット
	cs.rect(10,220,190,50);     // 矩形のパス
	cs.fill();                  // 塗りつぶし
	cs.stroke();                // 描画
}
  1. strokeRect(x, y, w, h),fillRect(x, y, w, h),clearRect(x, y, w, h)はパスではありませんのでbeginPath(),stroke()は必要ありません。rect(x, y, w, h)はパスです。
  2. stroke()はパスの描画でfill()は塗りつぶしです。W3C参照
  3. stroke()とfill()をどちらを先に記述するかで見栄えが変わることがあります。（塗と線の色が違う場合）

上記サンプルを開く

円、弧


window.onload=canvas_line;
function canvas_line() {
    /* <canvas>要素のノードオブジェクトの取得 */
    var canvas=document.getElementById('newcanvas');
    /* 未対応の場合処理終了 */
	if(!canvas.getContext){
		return false;
	}
    /* 描画用のオブジェクトを取得する */
    var cs=canvas.getContext('2d');
    /* 設定 */
	cs.fillStyle="#0000ff";             // 塗りつぶしの色 青
	cs.Style="#00ffff";                 // 線の色 黒
	cs.lineWidth = 10;                  // 線の太さ 10px
	
    /* 円を描く */
	cs.beginPath();                     // パスのリセット
	cs.arc(50,50,40,0,6.29,false);      // 円を描く 3.14の2倍強
	cs.stroke();                        //描画
    /* 円を描く */
	cs.beginPath();                     // パスのリセット
	cs.arc(150,50,40,0,Math.PI*2,false);// 円を描く 2π
	cs.stroke();                        // 描画
    /* 半円を描く */
	cs.beginPath();                     // パスのリセット
	cs.arc(50,150,40,0,Math.PI,false);  // 円を描く 時計回り
	cs.stroke();                        // 描画
    /* 半円を描く */
	cs.beginPath();                     // パスのリセット
	cs.arc(150,150,40,0,Math.PI,true);  // 円を描く 反時計回り
	cs.closePath();                     // パスを閉じる
	cs.stroke();                        // 描画
    /* 弧を描く */
	cs.beginPath();                     // パスのリセット
	// 開始角度45度終了角度90度で反時計回り
	cs.arc(50,250,40,Math.PI/180*45,Math.PI/2,true);
	cs.closePath();                     // パスを閉じる
	cs.stroke();                        // 描画
    /* 扇形を描く */
	cs.beginPath();                     // パスのリセット
	cs.moveTo(150,250);                 // 初めの位置
	cs.arc(150,250,40,Math.PI/180*45,Math.PI/2,true);
	cs.closePath();                     // パスを閉じる
	cs.stroke();                        // 描画
}
  1. arc(x, y, radius, startAngle, endAngle, anticlockwise)で円を描きます。xは円の中心のx座標、yは円の中心のy座標、radiusは半径、startAngleは開始角度で時計の3時の位置が0となります。endAngleは終了角度時計回りでラジアンとなります（3.14で半円6.28で円ですが正確ではないので円周率を表すMath.PIを使った方がいいでしょう）、anticlockwiseはどちらまわりかです、falseで時計回りtrueで反時計回りです。W3C参照
  2. arc(x, y, radius, startAngle, endAngle, anticlockwise)のendAngleに3.14の倍より少し大きい数値を設定しました。6.28では少し隙間が空くようです。
  3. 円周率はMath.PIで取得できるので１周分の角度は２πなのでMath.PI*2で円が描けます。
  4. arc(x, y, radius, startAngle, endAngle, anticlockwise)のstartAngleは時計の3時の位置が0（正のx軸）で時計回りに計算します。6時の位置がπ/2、9時がπ、12時が1.5πというふうになります。
  5. arc(x, y, radius, startAngle, endAngle, anticlockwise)のanticlockwiseはどちらまわりでパスをつなげるかです。falseが時計回りtureが反時計回りです。サンプルの2段目の半円はanticlockwise以外は同じ設定になります。（二つを並べるために中心座標は変更していますが）どちらまわりにしてもstartAngle, endAngleは3時が0で時計回りに指定します。
  6. 細かい角度指定はπが180度に相当するのでMath.PI/180*角度とすれば感覚的にわかりやすいかもしれません。
  7. 扇形にしたい場合はclosePath()とだけしても弧の開始位置と終了位置がつながるだけです。サンプルの3段目左
  8. 中心からパスを開始すれば（moveTo(円の中心のx,y)）うまく閉じる事が可能です。サンプルの3段目右

上記サンプルを開く