根据输入(百分比值)填充矩形画布的颜色

Fill color in Rectangle canvas based on input (Percentage value)

本文关键字：填充矩形颜色输入百分比更新时间：2023-09-26

我正在创建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(); 
                }   
            }
        });
    });

这里是矩形

的代码

var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          context.beginPath();
          context.rect(188, 50, 200, 100);
          context.fillStyle = 'yellow';
          context.fill();
          context.lineWidth = 7;
          context.strokeStyle = 'black';
          context.stroke();

这是我的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%的值时颜色必须只填充这个百分比直到100%

这里我尝试设置动画不透明度为0.25

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

请帮助我解决这个问题

Thanks in Advance

Ref: Fill color

与上面的链接类似，当我在文本框

中输入数字时，我想要解决方案

试试这样:

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