html5绘制五星红旗代码,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();

}

本文来源于网络：查看 >https://www.cnblogs.com/wenbinzhou/archive/2011/02/05/1949288.html