2013-03-15 69 views
-2

在使用javascript處理畫布時,是否可以使用ctx.fillText來返回輸入值?Javascript帆布和字體

這樣的事情我想:

(html) 
    (Customize:(input id="custom" value="Default Message" /) 
    (p)(button onclick="msg()")Try it(/button)(/p) 
    (canvas id="myCanvas" width="500" height="500") 
    (/canvas) 
(/html) 

(script) 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var message 
message = document.getElementById("custom").value; 

function msg(){ 
    ctx.fillStyle = "rgb(255, 255, 255)"; 
    ctx.font = "italic 800 30px Verdana"; 
    ctx.fillText(message, 485, 245, 1000); 
} 

msg(); 

(/script) 

所以無論用戶類型分爲輸入將在畫布上繪製時的「實戰」被點擊。這是可能的還是我的方式偏離軌道?

+1

你試過了什麼?它有用嗎? – 2013-03-15 15:38:43

回答

0

你試過你的代碼嗎?除了你需要在msg()函數中確定message的值以便它可以在用戶改變它時改變,你應該選擇一種新的顏色,或者在畫布上添加顏色,以便你可以看到它:

<body> 
Customize:<input id="custom" value="Default Message" /> 
    <p><button onclick="msg()">Try it</button></p> 
    <canvas style="background-color:#cccccc" id="myCanvas" width="500" height="500"> 
    </canvas> 
    <script> 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 

    var message; 

    function msg(){ 
    message=document.getElementById('custom').value; 
    ctx.fillStyle = "rgb(255, 255, 255)"; 
    ctx.font = "italic 800 30px Verdana"; 
    ctx.fillText(message, 100, 245, 1000); 
    } 

    msg(); 
    </script> 
</body>