admin管理员组

文章数量:1395879

I am working in HTML5 and i am trying to draw a watermark on image using text. I have following 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 ic Sans MS" ;
watermarkContext.fillStyle = "Red";
watermarkContext.fillText("WaterMark Demo",-width*2,72);
watermarkContext.fill();

}

I want to draw Text ("WaterMark Demo") diagonally in page.I have tried to do it by many ways but i didn't get success.

I am working in HTML5 and i am trying to draw a watermark on image using text. I have following 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 ic Sans MS" ;
watermarkContext.fillStyle = "Red";
watermarkContext.fillText("WaterMark Demo",-width*2,72);
watermarkContext.fill();

}

I want to draw Text ("WaterMark Demo") diagonally in page.I have tried to do it by many ways but i didn't get success.

  • javascript
  • html
  • html5-canvas
Share Improve this question asked May 27, 2013 at 10:21 DoOrDieDoOrDie 431 silver badge3 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

Here is some improved code:

var container = document.getElementById("pageContainer")
var origCanvas = document.getElementById("page1");
var wmCanvas = document.createElement("canvas");
wmCanvas.id = "watermark";
wmCanvas.width = origCanvas.width;
wmCanvas.height = origCanvas.height;
wmCanvas.setAttribute("style", "position:absolute;border:1px solid black")

if (container.firstChild)
  container.insertBefore(wmCanvas, container.firstChild);
else
  container.appendChild(wmCanvas);

var wmContext = wmCanvas.getContext('2d');
wmContext.globalAlpha = 0.5;
// setup text for filling
wmContext.font = "72px Comic Sans MS";
wmContext.fillStyle = "red";
// get the metrics with font settings
var metrics = wmContext.measureText("WaterMark Demo");
var width = metrics.width;
// height is font size
var height = 72;

// change the origin coordinate to the middle of the context
wmContext.translate(origCanvas.width / 2, origCanvas.height / 2);
// rotate the context (so it's rotated around its center)
wmContext.rotate(-Math.atan(origCanvas.height / origCanvas.width));
// as the origin is now at the center, just need to center the text
wmContext.fillText("WaterMark Demo", -width / 2, height / 2);
<div id="pageContainer" style="width: 612px; height: 792px;">
  <canvas id="page1" width="612" height="792"></canvas>
</div>

Working at: http://jsfiddle/EAXc9/7/

Heavily inspired by: https://stackoverflow./a/5400970/2249185

本文标签： javascriptHow to draw watermark in HTML5 Canvas with dynamic rotation valueStack Overflow

版权声明：本文标题：javascript - How to draw watermark in HTML5 Canvas with dynamic rotation value? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744088779a2589032.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。