Canvas五角星を描く

前言

ジオメトリモデル

ドラフト

開拓

パッケージ

前言
canvasを学ぶには、実践する必要があります.次は比較的簡単な例から始めましょう.五角星から始めましょう.
canvasの学友を知らないで、先に学びます:Canvasキャンバス
ジオメトリモデル
上図から大まかな考え方がはっきりと得られ、大円と小円の点がつながっていれば、五角星に着くことができます.
私のやり方は右下から描きます.canvasの座標系の第1象限は、実際には右上角ではなく右下角であるからです.これにより、sin()とcos()との正負関係にこだわることを避けることができる.
描画

var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');

var w = canvas.width;
var h = canvas.height;
var r1 = w / 2;
var r2 = r1 / 2;
var x1,x2,y1,y2;

cxt.translate(r1, r1);
cxt.beginPath();
for (var i = 0; i < 5; i++) {
  x1 = r1 * Math.cos((54 + i*72)/180*Math.PI);
  y1 = r1 * Math.sin((54 + i*72)/180*Math.PI);
  x2 = r2 * Math.cos((18 + i*72)/180*Math.PI);
  y2 = r2 * Math.sin((18 + i*72)/180*Math.PI);

  cxt.lineTo(x2, y2);
  cxt.lineTo(x1, y1);
}
cxt.closePath();

cxt.stroke();

図面コンテキスト環境

を取得する.

は、canvasの幅の高さを取得する、2つの円の半径

を定義する.

原点を(r, r)の円心位置

にリセットする.

lineTo()を使用して経路

を描画する.
注意:1.右下の最初の点が小さな円の上にあるので、ループではまず小さな円の上の点を描きます.2.beginPath()方法の後、lineTo()の代わりにmoveTo()を直接使用することができる.3.最後の点が開始点に線を引くように閉じる経路に注意してください.
広がる
このような五角星は単一すぎて、他の五角星の形状を取得したい場合は、どのように処理しますか.
観察すると、大きな円の半径はcanvasの幅によって決定され、小さな円の半径は変化することができる.ここのコードはr1 = r2 / 2です.
この割合を変更してみます.r1 = r2 / 2.5 r1 = r2 / 3
あなたはまた異なる五角星を得ることができます!
パッヶージ
多重化のために、2つの関数にカプセル化できます.

/*****************************
 * cxt         
 * r      
 * x，y     canvas         
 * rot         
 ****************************/
function draw_start(cxt, r, x, y, rot) {
  cxt.save();
  cxt.translate(x, y);
  cxt.rotate(rot/180*Math.PI);
  cxt.scale(r, r);
  startPath(cxt);

  cxt.stroke();
  cxt.restore();
}
//       
function startPath(cxt) {
  cxt.beginPath();
  for (var i = 0; i < 5; i++) {
    var x1 = Math.cos((54 + i*72)/180*Math.PI);
    var y1 = Math.sin((54 + i*72)/180*Math.PI);
    var x2 = Math.cos((18 + i*72)/180*Math.PI) * 0.5;
    var y2 = Math.sin((18 + i*72)/180*Math.PI) * 0.5;

    cxt.lineTo(x2, y2);
    cxt.lineTo(x1, y1);
  }
  cxt.closePath();
}