Как нарисовать водяной знак в HTML5 Canvas с динамическим значением поворота?
Я работаю в HTML5, и я пытаюсь нарисовать водяной знак на изображении, используя текст. У меня есть следующий код:
<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();
}
Я хочу нарисовать текст («WaterMark Demo») по диагонали на странице. Я пытался сделать это многими способами, но не добился успеха.