Wie zeichnet man ein Wasserzeichen in HTML5 Canvas mit einem dynamischen Rotationswert?

Question

May 27, 2013, 12:21 PM

Wie zeichnet man ein Wasserzeichen in HTML5 Canvas mit einem dynamischen Rotationswert?

Ich arbeite in HTML5 und versuche, mit Text ein Wasserzeichen auf das Bild zu zeichnen. Ich habe folgenden Code:

<html>
    <body onload="addWaterMarkOnPage();">
        <div id="pageContainer" style="width: 612px; height: 792px;">
             <canvas id="page1" width="612" height="792"></canvas> //image loading canvas  
             </canvas>
        </div>
    </body>
<html>

JavaScript

 function addWaterMarkOnPage()
 {
var watermarkCanvas=document.createElement("canvas");
watermarkCanvas.id="watermark";
var parentDivElement=document.getElementById("pageContainer")
var parentCanvasElment=document.getElementById("page");

watermarkCanvas.width=parentCanvasElment.width;
watermarkCanvas.height=parentCanvasElment.height;
watermarkCanvas.setAttribute("style","position:absolute")


if(parentDivElement.firstChild)
    parentDivElement.insertBefore(watermarkCanvas, parentDivElement.firstChild);
else
    parentDivElement.appendChild(watermarkCanvas);

var watermarkContext=watermarkCanvas.getContext('2d');

watermarkContext.globalAlpha=0.5;


watermarkContext.beginPath();
var metrics = watermarkContext.measureText("WaterMark Demo");
var width = metrics.width;
watermarkContext.rotate( (Math.PI / 180) * -45);  //rotate 25 degrees
watermarkContext.font = "72px comic Sans MS" ;
watermarkContext.fillStyle = "Red";
watermarkContext.fillText("WaterMark Demo",-width*2,72);
watermarkContext.fill();

}

Ich möchte Text ("WaterMark Demo") diagonal in eine Seite zeichnen. Ich habe es auf viele Arten versucht, aber ich habe keinen Erfolg gehabt.