javascript - Javascript 画布和字体

Question

使用 javascript 在画布上工作时，是否可以使用 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)

因此，当单击“Try It”时，无论用户在输入中键入什么内容，都将在画布上绘制。这是可能的还是我偏离了轨道？

score 0 · Accepted Answer

你试过你的代码吗？它基本上没问题，除了您需要确定函数message内的值msg()以便它可以在用户更改它时更改，并且您应该选择一种新颜色，或者向画布添加颜色以便您可以看到它：

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

javascript - Javascript 画布和字体

1 回答 1

Related

Reference