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/

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