ronde hoeken met javascript

Status
Niet open voor verdere reacties.

brinx

Nieuwe gebruiker
Lid geworden
23 mrt 2007
Berichten
4
Ik gebruik de volgende code om ronde hoeken te genereren:
http://www.maierhofer.de/BackgroundCanvas.htm

Echter werkt het nog niet helemaal; als ik een div aanmaak die de ronde hoeken zal hebben, maakt hij de tabel die hierbinnen valt (de div's die daar dus in komen et staan) van een ander formaat. Ik weet alleen totaal niet hoe javascript werkt en waar dit wordt aangegeven. Als ik dus om de footer tabel een div met naam demo2container zet wordt hij een stuk breder (http://www.hiphopnet.nl/2009/index_ie.php) dan wanneer dit niet het geval is (http://www.hiphopnet.nl/2009/)

Code:
$(document).ready(function() 
{  
	
	$("#Demo1Container").backgroundCanvas(); 
	$("#Demo2Container").backgroundCanvas(); 


});

// Draw the background  on load and resize
$(window).load(function () 
{ 
	DrawBackground(); 
});

$(window).resize(function()
{
	DrawBackground(); 
});


function DrawBackground()
{
	
	$("#Demo1Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt); 
	$("#Demo2Container").backgroundCanvasPaint(Demo1BackgroundPaintFkt); 

	


}



function Demo1BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:14,  border: 0 };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		backgroundGradient.addColorStop(0 ,'#aaaaaa');
		backgroundGradient.addColorStop(1, '#ffffff');
		context.fillStyle = "#ffffff";
		
		// Draw the blue border rectangle 
		$.canvasPaint.roundedRect(context,options);
		
		// Draw the gradient filled inner rectangle
		options.border = 1;
		context.fillStyle = backgroundGradient; 
		$.canvasPaint.roundedRect(context,options);
}
function Demo2BackgroundPaintFkt(context, width, height, canvas, $canvas, $canvasDiv, $content, $element ) 
{
		var options = {x:0, height: height, width: width, radius:14,  border: 0 };
		var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 2);
		//backgroundGradient.addColorStop(0 ,'#aaaaaa');
		//backgroundGradient.addColorStop(1, '#ffffff');
		context.fillStyle = "#ffffff";
		
		// Draw the blue border rectangle 
		$.canvasPaint.roundedRect(context,options);
		

}
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan