xxxxxxxxxx39
<head> <meta charset="utf-8"> <title>Jasper Johns Natinal Flag Generator</title></head><body onload="drawFlag()" style="background-color:#eff0f1;margin:0;padding:0;"><div onclick="drawFlag()" style="width:100%;height:100%;display:inline-block;position:absolute;"></div><canvas id="canvas" width="600" height="600" onclick="drawFlag()" style="position:absolute;top:calc((100% - 600px)/2);left:calc((100% - 600px)/2);"></canvas><!--<button type="button" name="reload" onclick="drawFlag()">Reload</button>--><script type="text/javascript">const cvs = document.getElementById("canvas");const context = cvs.getContext("2d");let flag_img;const country_codes = ["AD","AE","AF","AG","AI","AL","AM","AN","AO","AQ","AR","AS","AT","AU","AW","AX","AZ","BA","BB","BD","BE","BF","BG","BH","BI","BJ","BL","BM","BN","BO","BQ","BR","BS","BT","BV","BW","BY","BZ","CA","CC","CD","CF","CG","CH","CI","CK","CL","CM","CN","CO","CR","CS","CU","CV","CW","CX","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","EH","ER","ES","ET","FI","FJ","FK","FM","FO","FR","GA","GB","GD","GE","GF","GG","GH","GI","GL","GM","GN","GP","GQ","GR","GS","GT","GU","GW","GY","HK","HM","HN","HR","HT","HU","ID","IE","IL","IM","IN","IO","IQ","IR","IS","IT","JE","JM","JO","JP","KE","KG","KH","KI","KM","KN","KP","KR","KW","KY","KZ","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MF","MG","MH","MK","ML","MM","MN","MO","MP","MQ","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NC","NE","NF","NG","NI","NL","NO","NP","NR","NU","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PM","PN","PR","PS","PT","PW","PY","QA","RE","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SJ","SK","SL","SM","SN","SO","SR","SS","ST","SV","SX","SY","SZ","TC","TD","TF","TG","TH","TJ","TK","TL","TM","TN","TO","TR","TT","TV","TW","TZ","UA","UG","UM","US","UY","UZ","VA","VC","VE","VG","VI","VN","VU","WF","WS","XK","YE","YT","ZA","ZM","ZW"];function drawFlag(){ let n = Math.round(country_codes.length*Math.random()); let img = new Image(); //img.src = "http://www.geonames.org/flags/x/"+country_codes[n].toLowerCase()+".gif"; img.src = "https://cdn.staticaly.com/gh/hjnilsson/country-flags/master/svg/"+country_codes[n].toLowerCase()+".svg"; console.log(img.src); img.onload = ()=>{ //location.hash = country_codes[n]; context.clearRect(0,0,cvs.width,cvs.height); let h = cvs.width*(img.naturalHeight/img.naturalWidth); //console.log("cvs.width: "+cvs.width+"; "+"img.width: "+img.width); context.drawImage(img,0,((cvs.height-h)/2),cvs.width,h); context.save(); context.shadowBlur = 5; context.shadowColor = "#000"; context.shadowOffsetY = 3; context.drawImage(img,(cvs.width*(1-1/1.3)/2),((cvs.height-h/1.3)/2),cvs.width/1.3,h/1.3); context.drawImage(img,(cvs.width*(1-1/1.3/1.3)/2),((cvs.height-h/1.3/1.3)/2),cvs.width/1.3/1.3,h/1.3/1.3); context.restore(); }}</script></body>