標籤：res nload src 文字 https fill body javascrip 技術
代碼：
<!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 繪製加拿大楓葉旗
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
