<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 drawStar(ctx, x, y, R, r) {
		ctx.beginPath();
		for (var i = 0; i < 5; i++) {
			ctx.lineTo(
				Math.cos((18 + i * 72) / 180 * Math.PI) * R + x,
				-Math.sin((18 + i * 72) / 180 * Math.PI) * R + y
			);

			ctx.lineTo(
				Math.cos((54 + i * 72) / 180 * Math.PI) * r + x,
				-Math.sin((54 + i * 72) / 180 * Math.PI) * r + y
			);
		}
		ctx.closePath();
		ctx.stroke();
	}
  
  function drawScreen () {
    
    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;
    
    drawStar(ctx, 200, 120, 100, 50);
    
  }
  
  drawScreen();
  
}