代码：
<!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
HTML5 Canvas 绘制加拿大枫叶旗
原文地址：http://www.cnblogs.com/xiandedanteng/p/7472039.html