<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="code.xsl" ?>
<dns4.nl>
<voorbeeld>
<title>procedure voor een html5 canvas gradient achtergrond</title>
<verwijzende_link>http://www.dns4.nl/pagina/html5/canvas_gradient_achtergrond.html</verwijzende_link>
<informatie>


</informatie>
<programma_code>
<![CDATA[
<!-- de code begint vanaf hier.

		<style type="text/css" media="screen">
			#deachtergrond{position:absolute;margin:0;width:100%;height:200%;top:0px;left:0px;}
		</style>
		

		<script type="text/javascript">
			var doeAchtergrond = (function() {
				var utCanvas = document.createElement('canvas');
				var gebruikCanvas = !!(typeof(utCanvas.getContext) == 'function');
				var inhoudVan = gebruikCanvas ? utCanvas.getContext('2d') : null;
				var alsIE = /*@cc_on!@*/ false;
				try {
					inhoudVan.canvas.toDataURL();
				} catch(err) {
					gebruikCanvas = false;
				}
				if (gebruikCanvas) {
					return function(utEl, sKleur1, sKleur2, utrepeatY) {
						if (typeof(utEl) == 'string') {
							utEl = document.getElementById(utEl);
						}
						if (!utEl) {
							return false;
						}
						var nW = utEl.offsetWidth;
						var nH = utEl.offsetHeight;
						utCanvas.width = nW;
						utCanvas.height = nH;
						var dGradient, sRepeat;
						if (utrepeatY) {
							dGradient = inhoudVan.createLinearGradient(0, 0, nW, 0);
							sRepeat = 'repeat-y';
						} else {
							dGradient = inhoudVan.createLinearGradient(0, 0, 0, nH);
							sRepeat = 'repeat-x';
						}
						dGradient.addColorStop(0, sKleur1);
						dGradient.addColorStop(1, sKleur2);
						inhoudVan.fillStyle = dGradient;
						inhoudVan.fillRect(0, 0, nW, nH);
						var sDataUrl = inhoudVan.canvas.toDataURL('image/png');
						utEl.style.backgroundRepeat = sRepeat;
						utEl.style.backgroundImage = 'url(' + sDataUrl + ')';
						utEl.style.backgroundColor = sKleur2;
					};
				} else if (alsIE) {
					utCanvas = gebruikCanvas = inhoudVan = null;
					return function(utEl, sKleur1, sKleur2, utrepeatY) {
						if (typeof(utEl) == 'string') {
							utEl = document.getElementById(utEl);
						}
						if (!utEl) {
							return false;
						}
						utEl.style.zoom = 1;
						var sF = utEl.currentStyle.filter;
						utEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(	GradientType=', +( !! utrepeatY), ',enabled=true,startColorstr=', sKleur1, ',endColorstr=', sKleur2, ')'].join('');
					};
				} else {
					utCanvas = gebruikCanvas = inhoudVan = null;
					return function(utEl, sKleur1, sKleur2) {
						if (typeof(utEl) == 'string') {
							utEl = document.getElementById(utEl);
						}
						if (!utEl) {
							return false;
						}
						utEl.style.backgroundColor = sKleur2;
					};
				}
			})();
		</script>

		



		
		<script type="text/javascript">
			doeAchtergrond('deachtergrond','<?php echo $bodyachtergrond;?>','<?php echo $menulinksbalkjesborder;?>',0);
		</script>
		
		
		
		
		
		
de code is hier geeindigd.
// -->
]]>
</programma_code>
<code_link>http://www.dns4.nl/pagina/alle_tekst_files.html</code_link>
</voorbeeld>
</dns4.nl>
