Vlagen
Nederland, Provincie, Gemeente vlaggen
Bekijk de vlagen die ik via HTML-CANVAS code ontworpen heb.
Ben begonnen om de vlag van Noord-Brabant in html-canvas met behulp van de kleurcode te maken als tekst in een html pagina in September 2015. Die code is vervolgens te bekijken met een browser en wordt als een vlag getoond. Helaas had de provincie Noord-Brabant hier geen belangstelling voor na telefonisch contact. Dit uitgeprobeerd met de nieuwste technieken van HTML-Canvas. Een tekentechniek in een browser.
Deze vlagcode is te bekijken door de pagina te openen met je rechtermuisknop en de pagina bron te bekijken.
Hierna zie je een klein stukje tekst tussen < canvas >..... tot < / script >
Die je heel makelijk als tekst kan opslaan in je eigen html document om deze vervolgens op je eigen website te tonen.
Een vlag in het formaat 600 bij 400 pixels als eerste ontworpen. en hierna een kleinere (indien mogelijk) met 166 bij 110 pixels.
Ook dit is weer vrij te gebruiken, verlang alleen een link terug naar mijn website.
Onderstaande de code van de vlag van Noord-Brabant was tussen script en /script moet staan, waarbij de spaties tussen de code aanhef en sluiten verwijderd dienen te worden bij overname daar anders de code niet te zien was in dit html document:
Idem geld voor de starttag canvas en sluittag / canvas
< canvas id="vlag-NBklein" width="168" height="112" style="border:1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. < / canvas > < script > var c = document.getElementById("vlag-NBklein"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000";ctx.fillRect(000,0,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(56,0,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(112,0,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(28,28,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(84,28,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(140,28,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(000,56,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(56,56,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(112,56,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(28,84,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(84,84,28,28); ctx.fillStyle = "#FF0000";ctx.fillRect(140,84,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(28,0,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(84,0,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(140,0,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(000,28,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(56,28,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(112,28,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(28,56,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(84,56,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(140,56,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(000,84,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(56,84,28,28); ctx.fillStyle = "#FFFFFF";ctx.fillRect(112,84,28,28); < / script >