Code:
<!DOCTYPE HTML><HTMLLang= "Utf-8"><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/><Head> <title>Canada Maple Leaf Flag</title> </Head> <Bodyonload= "Draw ()"> <CanvasID= "Mycanvus"width= "496px"Height= "249px"style= "border:1px dashed black;">the text indicates that your browser does not support HTML5</Canvas> </Body></HTML><Scripttype= "Text/javascript"><!-- functionDraw () {varCanvas=document.getElementById ("Mycanvus"); varCanvaswidth=496; varCanvasheight=249; varContext=Canvas.getcontext ("2d"); Context.fillstyle= " White"; Context.fillrect (0, 0, Canvaswidth, canvasheight); //draw a red square on the side firstContext.fillstyle= "RGB (218,37,29)"; Context.fillrect (0, 0, 124, 249); Context.fillrect (372, 0, 124, 249); //Drawing Maple Leaf varimg=NewImage (); IMG.SRC='Fy.gif'; Context.save (); Img.onload=function(){ varpattern=Context.createpattern (IMG,'no-repeat'); Context.fillstyle=pattern; Context.translate (124,0); Context.fillrect (0,0,248,249); } context.restore (); } functionGetrad (degree) {returndegree/180*math.pi; }// -</Script>
Code and image download: Https://files.cnblogs.com/files/xiandedanteng/canadaFlag.rar
HTML5 Canvas drawing Canada Maple Leaf flag