(HTML + Javascript)获取要在画布上显示的文本输入和填充背景的单选按钮输入

要在画布上显示文本输入和填充背景的单选按钮输入，可以使用HTML和JavaScript来实现。

首先，我们可以使用HTML的<canvas>元素来创建一个画布，并设置其宽度和高度。然后，可以使用HTML的<input>元素来创建文本输入框和单选按钮。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Text Input</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <br>
    <input type="text" id="textInput" placeholder="输入文本">
    <br>
    <label>
        <input type="radio" name="bgColor" value="red"> 红色背景
    </label>
    <label>
        <input type="radio" name="bgColor" value="green"> 绿色背景
    </label>
    <label>
        <input type="radio" name="bgColor" value="blue"> 蓝色背景
    </label>

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

        // 监听文本输入框的变化
        var textInput = document.getElementById("textInput");
        textInput.addEventListener("input", function() {
            drawText();
        });

        // 监听单选按钮的变化
        var radioButtons = document.getElementsByName("bgColor");
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].addEventListener("change", function() {
                drawText();
            });
        }

        // 绘制文本和背景
        function drawText() {
            var text = textInput.value;
            var bgColor = getSelectedBgColor();

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = bgColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.font = "30px Arial";
            ctx.fillStyle = "white";
            ctx.fillText(text, 50, 100);
        }

        // 获取选中的背景颜色
        function getSelectedBgColor() {
            for (var i = 0; i < radioButtons.length; i++) {
                if (radioButtons[i].checked) {
                    return radioButtons[i].value;
                }
            }
            return "white"; // 默认白色背景
        }

        // 初始化画布
        drawText();
    </script>
</body>
</html>

在上述代码中，我们创建了一个宽度为400像素，高度为200像素的画布，并在其下方添加了一个文本输入框和三个单选按钮用于选择背景颜色。

通过JavaScript，我们监听了文本输入框的变化和单选按钮的变化，并在相应的事件处理函数中调用drawText()函数来重新绘制文本和背景。drawText()函数首先获取文本输入框的值和选中的背景颜色，然后使用clearRect()方法清除画布上的内容，使用fillRect()方法填充选中的背景颜色，最后使用fillText()方法绘制文本。

(HTML + Javascript)获取要在画布上显示的文本输入和填充背景的单选按钮输入

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐