Javascript 如何使用动态旋转值在HTML5画布中绘制水印?
我在HTML5中工作,我正在尝试使用文本在图像上绘制水印。 我有以下代码:Javascript 如何使用动态旋转值在HTML5画布中绘制水印?,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我在HTML5中工作,我正在尝试使用文本在图像上绘制水印。 我有以下代码: <html> <body onload="addWaterMarkOnPage();"> <div id="pageContainer" style="width: 612px; height: 792px;"> <canvas id="page1" width="612" height="792"></canvas&
<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>
}
我想在页面的对角线处绘制文本(“水印演示”),我尝试了很多方法,但都没有成功。下面是一些改进的代码:
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);
工作地点:
灵感来源于:取决于你所说的“完全对角”。这里的旋转为π/4,表示半个四分之一圈。如果你想从一个角到另一个角,你需要计算角度。好的,这意味着每当我改变角度时,我也会改变平移坐标。这是正确的。对于角度,你可以这样读:那么有没有任何计算来获得平移坐标?我更新了小提琴:不是重新转换原点,而是调整了文本。由于之后不再使用上下文,因此不需要重置它。
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);