Mit dem Attribut shadowOffsetX
wird die horizontale Verschiebung des Schattens zum
Ausgangselement angegeben. Die Werte können positive und negative sein, entsprechend der gewüschten
Richtung des Schattens.
Initialwert ist 0.
shadowOffsetX = value
Aus der folgenden Abbildung wird ersichtlich, wo sich das vertikale Offset befindet.
function drawIt(){ var objCanvas = document.getElementById("canvas_id"); // Falls das Objekt unterstützt wird if(objCanvas.getContext){ // Kontext var objContext = objCanvas.getContext('2d'); // Schattenunschärfe objContext.shadowBlur = 2; objContext.shadowOffsetY = 0; // Schattenfarbe zuweisen objContext.shadowColor = "rgba(64, 64, 64, 0.7)"; // Füllfarbe objContext.fillStyle = "#0f0"; for(var i=0; i<5; i++){ // Neues Dreieck beginnen objContext.beginPath(); objContext.moveTo(50, 20); objContext.lineTo(20, 60); objContext.lineTo(80, 60); objContext.lineTo(50, 20); // Schattenoffset objContext.shadowOffsetX = 5 + i; // Dreieck füllen objContext.fill(); // Ursprung verschieben objContext.translate(80, 0); } }else{ // Sonstiger Code } }
Im Beispiel werden fünf Dreiecke gezeichnet. Je weiter rechts das Dreieck liegt, desto grösser ist das horizontale Offset seines Schattens.
Werden die Dreiecke ohne Schatten angezeigt, unterstützt ihr Browser keine Schatteneffekte.