这段代码比较简单，中间的枫叶使用了图片，因为没找到画法：
<!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="496px" height="249px" style="border:1px dashed black;"> 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- function draw(){ var canvas=document.getElementById("myCanvus"); var canvasWidth=496; var canvasHeight=249; var context=canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0, 0, canvasWidth, canvasHeight); // 先画边上红色方块 context.fillStyle = "rgb(218,37,29)"; context.fillRect(0, 0, 124, 249); context.fillRect(372, 0, 124, 249); // 绘制枫叶 var img=new Image(); img.src='fy.gif'; context.save(); img.onload=function(){ var pattern=context.createPattern(img,'no-repeat'); context.fillStyle=pattern; context.translate(124,0); context.fillRect(0,0,248,249); } context.restore(); } function getRad(degree){ return degree/180*Math.PI; } //--> </script>
代码及图片下载：https://files.cnblogs.com/files/xiandedanteng/canadaFlag.rar