Jak narysować znak wodny na płótnie HTML5 z dynamiczną wartością obrotu?

Question

May 27, 2013, 12:21 PM

Jak narysować znak wodny na płótnie HTML5 z dynamiczną wartością obrotu?

Pracuję w HTML5 i próbuję narysować znak wodny na obrazie za pomocą tekstu. Mam następujący kod:

<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();

}

Chcę narysować tekst („WaterMark Demo”) po przekątnej na stronie. Próbowałem to zrobić na wiele sposobów, ale nie odniosłem sukcesu.