<canvas id="myCanvas" width="600" height="300"></canvas>
window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded () {
  canvasApp(); //包含整个Canvas应用程序
}
function canvasSupport (e) {
  
	  return !!e.getContext;

}
function canvasApp () {
  var myCanvas = document.getElementById('myCanvas');

  if (!canvasSupport(myCanvas)) {
	  return; 
	}
  
  var ctx = myCanvas.getContext('2d');
  
  myCanvas.width = window.innerWidth;
  myCanvas.height = window.innerHeight;
  
  function drawScreen () {
    
    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;
    ctx.beginPath();
    
    // i => 五角星五个点
    // 100 => 外圆半径
    // 50 => 内圆半径
    // 200, 100 => 圆心位置
    for (var i = 0; i < 5; i++) {
      ctx.lineTo(
        Math.cos( (18 + 72*i)/180 * Math.PI ) * 100 + 200,
        -Math.sin( (18 + 72*i)/180 * Math.PI ) * 100 + 120
      );
      ctx.lineTo(
        Math.cos( (54 + 72*i)/180 * Math.PI ) * 50 + 200,
        -Math.sin( (54 + 72*i)/180 * Math.PI ) * 50 + 120
      );
    }
    ctx.closePath();
    ctx.stroke();
    
  }
  
  drawScreen();
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.