Question

在下面的例子中，假设json.mes是从Ajax收到的消息;设计了一个按钮，必须在画布框中显示消息。我试图使用getElementById读取消息（如下所示）;但是，它不起作用。有解决方案吗

<div> <button id="submit"  type="button" class="btn btn-success" style="float: right;">Populate</button></div>
<script>
var canvas = document.getElementById("myCanvas3");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = "#dbbd7a";

ctx.font = "10px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillStyle = "#ff0000";
ctx.fillText(document.getElementById("picoutput0"), 74, 74);
</script>

<script>
...
 $("#submit").click(function(e) {
...
var text0=json.mes
$('#picoutput0').html(text0);
</script>

Answer 1

试用此代码

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var stringTitle = document.getElementById('title').textContent;
console.log(stringTitle);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);

DEMO

使用Javascript更改canvas对象中的文本

1 个答案: