从文本文件中获取数据并将其显示在html画布中

时间:2017-06-08 18:16:42

标签: javascript php html5 canvas

我对php很新,我需要一些帮助来做点什么。我试图从.txt文件中读取一些数据,然后对于文档的每一行,我想创建一个包含该数据的画布。 我设法使用以下代码从.txt文件中提取数据:

<?php
 $file_handle = fopen("sample.txt", "rb");

 while (!feof($file_handle) ) {
 $line_of_text = fgets($file_handle);
 $parts = explode(' ', $line_of_text);
 echo "";
  }
fclose($file_handle);
?>

我知道在echo标签中我应该显示我的数据,但我不知道如何。

这是我的画布脚本:

<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create gradient
var grd = ctx.createLinearGradient(10,10,200,0);
grd.addColorStop(0,"#00BFFF");
ctx.lineWidth = 2;
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,60,250,70);
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = 'black';
ctx.strokeText("PASS: ", 80, 110);

ctx.fillText("Name: ", 30, 230);
ctx.fillText("Surname: ", 30, 250);
ctx.fillText("Gender: ", 30, 270);
ctx.fillText("Role: ", 30, 290);
}
</script>

我试图得到这样的东西: final result

0 个答案:

没有答案