代码：
<!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