代码：
<!DOCTYPE html><html lang="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><head> ????<title>美国国旗</title> ???</head> ????<body onload="draw()"> ???????<canvas id="myCanvus" width="380px" height="200px" style="border:1px dashed black;"> ???????????出现文字表示你的浏览器不支持HTML5 ???????</canvas> ????</body></html><script type="text/javascript"><!-- ???function draw(){ ???????var canvas=document.getElementById("myCanvus"); ???????var canvasWidth=380; ???????var canvasHeight=200; ???????var context=canvas.getContext("2d"); ???????????????context.fillStyle = "white"; ???????context.fillRect(0, 0, canvasWidth, canvasHeight); ???????????????var i; ???????// 13个横条 ???????for(i=0;i<13;i++){ ???????????if(i % 2==0){ ???????????????context.fillStyle = "red"; ???????????????context.fillRect(0, canvasHeight/13*i, canvasWidth, canvasHeight/13); ???????????}else{ ???????????????context.fillStyle = "white"; ???????????????context.fillRect(0, canvasHeight/13*i, canvasWidth, canvasHeight/13); ???????????} ???????????????????} ???????// 左上角蓝底 ???????var D=canvasWidth/5*2; ???????var C=canvasHeight/13*7; ???????context.fillStyle = "blue"; ???????context.fillRect(0, 0, D, C); ???????// 画星星 ???????var x; ???????var y; ???????var j=0; ???????context.strokeStyle = "white"; ???????context.fillStyle = "white" ???????for(i=0;i<6;i++){ ???????????for(j=0;j<5;j++){ ???????????????x=D/12+2*i*D/12; ???????????????y=C/10+2*j*C/10; ???????????????context.save(); ???????????????var r=5; ???????????????context.translate(x-r,y-r); ???????????????????????????????context.beginPath(); ???????????????context.moveTo(r, 0); ???????????????context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r); ???????????????context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r); ???????????????context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r); ???????????????context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r); ???????????????context.lineTo(r, 0); ???????????????context.fill(); ???????????????context.stroke(); ???????????????context.closePath(); ???????????????context.restore(); ???????????} ???????} ???????for(i=0;i<5;i++){ ???????????for(j=0;j<4;j++){ ???????????????x=D/6+2*i*D/12; ???????????????y=C/5+2*j*C/10; ???????????????context.save(); ???????????????var r=5; ???????????????context.translate(x-r,y-r); ???????????????????????????????context.beginPath(); ???????????????context.moveTo(r, 0); ???????????????context.lineTo(r+Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r); ???????????????context.lineTo(r-Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r); ???????????????context.lineTo(r+Math.cos(Math.PI*1/10)*r, r-Math.sin(Math.PI*1/10)*r); ???????????????context.lineTo(r-Math.cos(Math.PI*3/10)*r, r+Math.sin(Math.PI*3/10)*r); ???????????????context.lineTo(r, 0); ???????????????context.fill(); ???????????????context.stroke(); ???????????????context.closePath(); ???????????????context.restore(); ???????????} ???????} ???} ???function getRad(degree){ ???????return degree/180*Math.PI; ???}//--></script>关于美国国旗如何画请参考：https://wenku.baidu.com/view/d6eb1d40b4daa58da1114a32.html
HTML5 Canvas 描画星条旗
原文地址：http://www.cnblogs.com/xiandedanteng/p/7470362.html