Question

我已经编写了一些JavaScript，现在我想通过php输入更改text变量。我怎样才能做到这一点？我希望有任何选择可以轻松实现，但现在我对此一无所知。

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var maxWidth = 252;
var lineHeight = 15;
var x = (canvas.width - maxWidth) / 2;
var y = 100;
var text = 'duuuuzo teeeekstuuu ksda sasdjk asjdk asjkdablsd ab dsjhabdsalkdbs adsj asbld';

function print(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  words.forEach(function(word) {
    var testLine = line + word + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth) {
      context.fillText(line, x, y);
      line = word + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  });
  context.fillText(line, x, y);
}

context.fillStyle = '#333';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#fff';
context.font = '13px Arial, sans-serif';

print(context, text, x, y, maxWidth, lineHeight);

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Generator</title>
</head>

<body>
  <canvas width="272" height="340"></canvas>
  <script src="js/index.js"></script>
</body>

</html>

有人可以帮我吗？

Answer 1

想到了一些想法：

让PHP处理.js扩展名，并生成一个.js文件来填充该值
让PHP在HTML中设置全局text变量的值（将成为PHP页面）
通过AJAX获取价值。

Answer 2

也许你可以在画布下使用数据属性

<div id="myCanvas" data-text="<?php echo $myValue; ?>">
 <canvas width="272" height="340"></canvas>
</div>

你可以这样说：

 var text = document.getElementById('myCanvas').dataset.text;

MediaBrowser/SocketHttpListener

通过PHP更改JS值

2 个答案: