使用Javascript更改畫布對象中的文本

在下面的示例中，可以說json.mes是從Ajax接收到的消息;設計了一個按鈕，它必須在畫布框中顯示消息。我嘗試使用getElementById（如下）讀取消息;但是，它不起作用。任何解決方案使用Javascript更改畫布對象中的文本

<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>

來源

2017-05-04 salehinejad

'的document.getElementById（「picoutput0」）。innerHTML'，但你最好只是讓'提供text0'您canvas腳本（它目前似乎已經在全局範圍內），並直接調用'ctx.fillText（text0，x，y）' – Kaiido

@Kaiido我試過了;這是行不通的。 .innerHTML也不起作用。 – salehinejad

這個問題的可能重複http://stackoverflow.com/questions/31882814/html-canvas-change-text-dynamically – subbu

試試這個代碼

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

來源

2017-05-04 05:38:26 Amal

使用Javascript更改畫布對象中的文本

回答

相關問題