我正在开发卡片制造商应用程序。其背后的想法是为每张卡片创建一个包含数据的 CSV 文件、一个包含图像的文件夹，并在上传 CSV 文件后为我拥有的每个角色创建一张卡片。到目前为止一切顺利，但我被困在画布前写文字。画布是通过重叠许多不同的图像创建的，但文本出现在背景上，最终被其他图像完全覆盖。我希望文本在它前面！我在加载包含数据的 CSV 文件时触发所有内容，我实际上使用了“ context.fillText ”，但没有像我希望的那样工作。如何将变量中的文本放在画布前面的最后 3 个“context.fillText”中？最后的范围是拥有一个可以保存为图像的画布。<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"type="text/css" /> <link rel="stylesheet" href="Pagina.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js"></script> <script src="Pagina.js"></script> <script src="papaparse.js"></script> <script src="papaparse.min.js"></script> <title>Card maker</title> </head> <body> <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" /> <div class="cartaSingola"> <div class="contenitoreCarte"> <canvas id="myCanvas" width="2500" height="3500"></canvas> </div> </div> </body></html>
2 回答
qq_遁去的一_1
TA贡献1725条经验 获得超7个赞
我认为您的问题是您在“所有图像已加载”回调中绘制图像，但在运行此回调之前绘制了文本。
试试这个：
loadImages(sources, function(images) {
context.drawImage(images.image1, 0, 0, 2220 , 3240);
// context.drawImage image2, 3, ...9,
context.drawImage(images.image10, 170, 2950, 130 ,170);
// Draw text here
context.font = "40pt Calibri";
context.fillText(nome, 20, 20);
context.fillText(potere, 20, 20);
context.fillText(bonus, 20, 20);
});
并在这里替换var为const：
const nome = results.data[i][1];
const potere = results.data[i][6];
const bonus = results.data[i][7];
茅侃侃
TA贡献1842条经验 获得超21个赞
我认为您可以在内部甚至画布中使用.append()和创建文本.contenitoreCarte
用法太简单了，这里文档： https ://api.jquery.com/append/
如果您给我一个 CSV 示例，我可以通过完成您的代码来提交更好的答案
添加回答
举报
0/150
提交
取消