자바 스크립트 캔버스 및 글꼴

-2

자바 스크립트로 캔버스에서 작업 할 때 ctx.fillText를 사용하여 입력 값을 반환 할 수 있습니까? 이 같은자바 스크립트 캔버스 및 글꼴

뭔가 것 같아요 :

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

그래서 입력에 사용자 유형 때 클릭 "그것은 시도"캔버스에 그려집니다 뭐든간에. 이것이 가능한가, 아니면 나는 길을 벗어나고 있는가?

출처

2013-03-15 Eamonn

무엇을 시도 했습니까? 작동 했나요? –

코드를 사용해 보셨습니까? 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>

출처

2013-03-15 16:16:08

자바 스크립트 캔버스 및 글꼴

답변

관련 문제