Javascript 基于输入在矩形画布中填充颜色（百分比值）

我正在创建HTML5画布对象（矩形）并根据文本框中输入的值填充颜色（验证是否只输入百分比值）

我从堆栈溢出中找到一个链接

这是密码

    $(document).ready(function() {
        $("#my_input").keypress(function(event) {
            // Allow only backspace and delete
            if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
                $("#myCanvas").animate({ opacity: 0.25 });
            }
            else {
                // Ensure that it is a number and stop the keypress
                if (event.keyCode < 48 || event.keyCode > 57) {
                    event.preventDefault(); 
                }   
            }
        });
    });

这是我的html代码

Numberic Value <input type ="textbox" id="my_input" class="numeric" name="Enter Value" placeholder="Enter value"/>
    <canvas id="myCanvas" width="578" height="200"></canvas>

数值

当我在文本框中输入值10%时，颜色必须仅填充该百分比，如wise，直到100%

在这里，我尝试使用动画不透明度0.25

如果在文本框中输入任何值，则画布的结果将减少0.25%

请帮我解决这个问题

提前谢谢

参考：

---

与上面的链接类似，当我在文本框中输入数字时，我需要解决方案

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var perc = 0.1;
var maxWidth = 200;
var maxHeight = 100;

   $(document).ready(function() {
    $("#my_input").keyup(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
            //$("#myCanvas").animate({ opacity: 0.25 });
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57) {
                event.preventDefault(); 
            }   
        }
        perc =  Number.parseInt($("#my_input").val()) / 100 ;
        draw();
    });

        function draw(){
            // clear
            context.clearRect(0, 0, 1000, 1000);

            var x = 188;
            var y = 50;

            // outline
            context.beginPath();
            context.rect(x, y, maxWidth, maxHeight);
            context.lineWidth = 7;
            context.strokeStyle = 'black';
            context.stroke();

            // fill
            context.beginPath();
            context.fillStyle = 'yellow';
            context.rect(x, y, maxWidth * perc, maxHeight);
            context.fill();
        }
        draw();
    });

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var-perc=0.1；
var maxWidth=200；
var maxHeight=100；
$（文档）.ready（函数（）{
$（“#我的输入”）.keyup（函数（事件）{
//仅允许退格和删除
if（event.keyCode==46 | | event.keyCode==8 | | event.keyCode==37）{
//$（#myCanvas”）.animate（{opacity:0.25}）；
}
否则{
//确保它是一个数字并停止按键
如果（event.keyCode<48 | | event.keyCode>57）{
event.preventDefault（）；
}   
}
perc=Number.parseInt（$（“#我的输入”）.val（））/100；
draw（）；
});
函数绘图（）{
//清楚的
clearRect（0,0,1000,1000）；
var x=188；
变量y=50；
//轮廓
context.beginPath（）；
rect（x，y，maxWidth，maxHeight）；
context.lineWidth=7；
context.strokeStyle='black'；
stroke（）；
//填满
context.beginPath（）；
context.fillStyle='yellow'；
rect（x，y，maxWidth*perc，maxHeight）；
context.fill（）；
}
draw（）；
});

hi@rob感谢分享上述代码，但当我尝试添加上述代码时，我得到了错误调用方法getContext of nullhi@rob，我解决了上述错误，但现在我得到了以下错误uncaught TypeError:Object function Number（）{[native code]}没有方法“parseInt”，你能帮我解决这个问题吗($(“#my#u input”）.val（））或Number（$（“#my#u input”）.val（））而不是teadhi@rob谢谢你这么多，我把parseInt放进去了，它工作得很好谢谢你分享你的代码解决方案。伙计们，请帮我解决上面的问题

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var perc = 0.1;
var maxWidth = 200;
var maxHeight = 100;

   $(document).ready(function() {
    $("#my_input").keyup(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
            //$("#myCanvas").animate({ opacity: 0.25 });
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57) {
                event.preventDefault(); 
            }   
        }
        perc =  Number.parseInt($("#my_input").val()) / 100 ;
        draw();
    });

        function draw(){
            // clear
            context.clearRect(0, 0, 1000, 1000);

            var x = 188;
            var y = 50;

            // outline
            context.beginPath();
            context.rect(x, y, maxWidth, maxHeight);
            context.lineWidth = 7;
            context.strokeStyle = 'black';
            context.stroke();

            // fill
            context.beginPath();
            context.fillStyle = 'yellow';
            context.rect(x, y, maxWidth * perc, maxHeight);
            context.fill();
        }
        draw();
    });