html5 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();
}

 

使用方法：

　　直接調用draw()方法即可

draw()

 

　　博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
　　小魚尼莫手工飾品店
經營:
　　發飾、頭花、發夾、耳環等（手工制作）
網店：
　　http://shop117066935.taobao.com/

  

繼續正題... 

　

效果展示：

 

 

------------------------------------------------

　　博主經營一家發飾淘寶店，都是純手工制作哦，開業沖鑽，只為信譽！需要的親們可以光顧一下！謝謝大家的支持！
店名：
　　小魚尼莫手工飾品店
經營:
　　發飾、頭花、發夾、耳環等（手工制作）
網店：
　　http://shop117066935.taobao.com/

  ---------------------------------------------------------------------