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/

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