у меня 4 входа. Поля ввода 2 и 4 являются необязательными. Если поле ввода 2 оставлено пустым, мне нужно ввести координаты X Y X для смещения вверх на холсте. Причиной такого смещения является то, что все 4 ввода будут отображаться на холсте, на котором есть фоновое изображение с точным расположением для каждой строки ввода текста.
Я не уверен, как использовать jquery из-за координат X Y.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/Canvas2Image.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core-compat.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
});
</script>
<script type="text/javascript">
var oCtx;
function updateClicked() {
oCtx.font = "300 32px coleman";
oCtx.textBaseline = "top";
oCtx.fillStyle = "#000000";
oCtx.fillText(document.getElementById("line1").value, 253, 122);
oCtx.font = "500 22px coleman";
oCtx.fillText(document.getElementById("line2").value, 253, 166);
oCtx.font = "300 32px coleman";
oCtx.fillText(document.getElementById("line3").value, 253, 422);
oCtx.font = "500 22px coleman";
oCtx.fillText(document.getElementById("line4").value, 253, 466);
}
window.onload = function () {
var oCanvas = document.getElementById("thecanvas");
oCtx = oCanvas.getContext("2d");
var iWidth = oCanvas.width;
var iHeight = oCanvas.height;
var img = new Image();
//oCtx.fillStyle = "rgb(255,255,255)";
//oCtx.fillRect(0,0,iWidth,iHeight);
img.onload = function () {
oCtx.drawImage(img, 0, 0);
};
img.src = "nametag.png";
//BACKGROUND-IMAGE//
function showDownloadText() {
document.getElementById("buttoncontainer").style.display = "none";
document.getElementById("textdownload").style.display = "block";
}
function hideDownloadText() {
document.getElementById("buttoncontainer").style.display = "block";
document.getElementById("textdownload").style.display = "none";
}
function convertCanvas(strType) {
if (strType == "PNG")
var oImg = Canvas2Image.saveAsPNG(oCanvas, true);
if (strType == "BMP")
var oImg = Canvas2Image.saveAsBMP(oCanvas, true);
if (strType == "JPEG")
var oImg = Canvas2Image.saveAsJPEG(oCanvas, true);
if (!oImg) {
alert("Sorry, this browser is not capable of saving." + strType + " files!");
return false;
}
oImg.id = "canvasimage";
oImg.style.border = oCanvas.style.border;
oCanvas.parentNode.replaceChild(oImg, oCanvas);
showDownloadText();
}
//RENDER IMAGE
document.getElementById("convertpngbtn").onclick = function () {
convertCanvas("PNG");
}
document.getElementById("resetbtn").onclick = function () {
var oImg = document.getElementById("canvasimage");
oImg.parentNode.replaceChild(oCanvas, oImg);
hideDownloadText();
}
}
</script>
</head>
<body>
<h1 style="font-family: coleman; font-weight:300; padding-bottom:0px;margin-bottom:0px;">Test font 1</h1>
<h4 style="font-family: coleman; font-weight:500; padding-top:0px;margin-top:0px;">Test font 2</h4>
<canvas width="800" height="596" style="border:1px solid black;font-family: coleman;" id="thecanvas"></canvas>
<br /><br />
<div id="textdownload" style="display:none;font-style:italic;">
Right click to save as a transparent PNG or click the edit button below to go back.<br />
<input type="button" id="resetbtn" class="button" value="EDIT" onclick="window.location.reload()">
</div>
<div id="buttoncontainer" style="display:block;">
<p>
Line1 :
<input type="text" style="margin-right:22px;" id="line1" maxlength="50" />
<input type="text" style="margin-right:22px;" id="line1a" maxlength="50" />
Line2 :
<input type="text" name="line2" id="line2" maxlength="50" />
</p>
<p>
Line1 :
<input type="text" style="margin-right:22px;" id="line3" maxlength="50" />
Line2 :
<input type="text" id="line4" maxlength="50" />
</p>
<p>
<input type="button" class="button" id="update" onclick="updateClicked()" value="UPDATE">
<input type="button" class="button" id="convertpngbtn" value="SAVE">
<input type="button" id="resetbtn" class="button" value="Reset" onclick="window.location.reload()">
</p>
</div>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "fknjz"
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
LINE1
LINE2 (опционально - если пустой XY в строке 3 сдвигается вверх)
Line3
LINE4 (необязательно - если пусто, эта последняя строка не отображается на холсте)
ВЫВОД на холст:
Привет, меня зовут Гарри
(пусто - я студент сдвигается вверх)
Я студент
(пробел не отображается на холсте)
OR
Привет, меня зовут Гарри
Я живу в Нью-Йорке
Я студент
Мне 19 лет