如何从画布前的变量中写入文本？
我正在开发卡片制造商应用程序。其背后的想法是为每张卡片创建一个包含数据的 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>
慕妹32420032回答
-
qq_遁去的一_1
我认为您的问题是您在“所有图像已加载”回调中绘制图像，但在运行此回调之前绘制了文本。试试这个：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]; -
茅侃侃
我认为您可以在内部甚至画布中使用.append()和创建文本.contenitoreCarte用法太简单了，这里文档： https ://api.jquery.com/append/如果您给我一个 CSV 示例，我可以通过完成您的代码来提交更好的答案
随时随地看视频慕课网APP
相关分类
JavaScript