html5:使用canvas绘制五星红旗

 

之前在使用canvas绘制adidas商标的时候就想过画五角星，现在来实现愿望了，画个五星红旗。虽然用svg比canvas好实现，但是现在canvas的应用比svg多，浏览器的支持也更好，所以不能放下canvas。这几周在mozilla学了点canvas的教程，学完了总该来应用下，好了废话不多说，点击观看演示

function draw() {
		  var ctx = document.getElementById('canvas').getContext('2d');
		  //绘制红色的画布
		  ctx.fillStyle = '#f00';
		  ctx.fillRect(0,0,450,300);
		  ctx.translate(75,75);
		  //绘制大五角星 
		  ctx.save();
		  ctx.rotate(Math.PI*2/7);
		  drawStar(ctx,40);   
		  ctx.restore();
		  //绘制四个小五角星 
		  ctx.save();
		  ctx.translate(80,-50);
		  drawStar(ctx,10);   
		  ctx.restore();
		  ctx.save();
		  ctx.translate(110,-10);
		  drawStar(ctx,10);    
		  ctx.restore();
		  ctx.save();
		  ctx.translate(110,30);
		  drawStar(ctx,10);    
		  ctx.restore();
		  ctx.save();
		  ctx.translate(80,70);
		  drawStar(ctx,10);    
		  ctx.restore(); 
		}
		//绘制五角星函数
	function drawStar(ctx,r){
		  ctx.save();
		  ctx.beginPath()
		  ctx.moveTo(r,0);
		  for (var i=0;i<9;i++){
		    ctx.rotate(Math.PI/5);
		    if(i%2 == 0) {
		      ctx.lineTo((r/0.525731)*0.200811,0);
		    } else {
		      ctx.lineTo(r,0);
		    }
		  }
		  ctx.closePath();
		  ctx.fillStyle='#FFFF00';
		  ctx.fill();
		  ctx.restore();
	}