javascript - 在 Canvas Cylinder 中动态填充颜色我收到错误消息，因为最大宽度未定义

Question

请容忍我的英语

我正在努力创建(我是 Canvas 的新手)圆柱体。当用户在文本框中输入百分比值时动态填充颜色，例如 10%，圆柱体填充 10%，直到 100%。

我已经创建了圆柱体，当我尝试使用其他值而不是 % 时，我已经为文本框创建了小验证

这是我的验证和填充颜色代码

<script type="text/javascript">
                $(document).ready(function() {
                    $("#my_input").focusout(function(event) {
                        if($("#my_input").val().indexOf("%") != -1){

                        if($.isNumeric($("#my_input").val().replace('%',''))) {

                                // 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 =  parseInt($("#my_input").val().replace('%','')) / 100;
                                draw();                             
                                }
                            }
                            else{
                                alert('Value in %');
                            }
                    });
                });
                function draw()
                {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    var x = 180;
                    var y = 40;     
                    context.beginPath();
                    context.rect(x, y, maxWidth, maxHeight);
                    context.lineWidth = 7;

                    var per = perc;
                    if(per > 1)perc = 1;
                    // fill
                    context.beginPath();
                    context.fillStyle = 'yellow';
                    context.rect(x, y, maxWidth * perc, maxHeight);
                    context.fill();
                }

这是我的 Canvas HTML 代码

<canvas id="canvas" width="300px" height="300px"></canvas>

下面是创建圆柱体的代码

            <script type='text/javascript'>//<![CDATA[ 
        //the below is code is for to work RequestAnimationFrame (SVG) in all the browsers -- Mahadevan         
        (function() {
            var lastTime = 0;
            var vendors = ['webkit', 'moz'];
            for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
                window.cancelAnimationFrame =
                  window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
            }

            if (!window.requestAnimationFrame)
                window.requestAnimationFrame = function(callback, element) {
                    var currTime = new Date().getTime();
                    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                    var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                      timeToCall);
                    lastTime = currTime + timeToCall;
                    return id;
                };

            if (!window.cancelAnimationFrame)
                window.cancelAnimationFrame = function(id) {
                    clearTimeout(id);
                };
        }());
        //the below code is to generate Cylinder object -- Mahadevan
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var degreeAngle = 0;
        requestAnimationFrame(animate);

        function drawRotatedCylinder(x, y, w, h, degreeAngle) {
            context.save();
            context.translate(x + w / 10, y + h / 10);
            context.rotate(degreeAngle * Math.PI / 180);
            drawCylinder(-w / 10, -h / 10, w, h);
            context.restore();
        }
        function drawCylinder(x, y, w, h) {

            context.beginPath(); //to draw the top circle
            for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01) {

                xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);

                yPos = (y + h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);

                if (i == 0) {
                    context.moveTo(xPos, yPos);
                } else {
                    context.lineTo(xPos, yPos);
                }
            }
            context.moveTo(x, y + h / 8);
            context.lineTo(x, y + h - h / 8);

            for (var i = 0 * Math.PI; i < Math.PI; i += 0.01) {
                xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
                yPos = (y + h - h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);

                if (i == 0) {
                    context.moveTo(xPos, yPos);

                } else {
                    context.lineTo(xPos, yPos);
                }
            }
            context.moveTo(x + w, y + h / 8);
            context.lineTo(x + w, y + h - h / 8);
            context.strokeStyle = '#ff0000';
            context.stroke();               
            context.fillStyle = 'yellow';
            context.fill();
        }

        function animate() {
            //requestAnimationFrame(animate);
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
        }


        //]]> 
        </script>

这是我最终的 HTML 代码

Numberic Value <input type ="text" id="my_input" class="numeric" name="my_input" placeholder="Enter value"/>

当我试图在文本框中输入值时，圆柱体 Canvas 被隐藏，我收到一个错误 Uncaught ReferenceError: maxWidth is not defined

当我在 google 中检查圆形 Canvas 时，它说我需要放置 (context.rect) 而不是 rect 我需要放置 arc 我尝试放置它仍然无法正常工作。

请帮助我解决上述问题

感谢和问候 马哈德万

Answer 1

您应该调整圆柱体的高度，而不是宽度...如果您正在清除 (clearRect) Canvas ，则应该重新绘制圆柱体。

你可以试试下面的函数:

function draw()
{
    maxWidth = 180;
    maxHeight = 140;
    context.clearRect(0, 0, canvas.width, canvas.height);
    var x = 190;
    var y = 260;     

    var per = perc;
    if(per > 1)perc = 1;
    // fill
    context.beginPath();
    context.fillStyle = 'yellow';
    context.rect(x-maxWidth/2, y-maxHeight * perc, maxWidth, maxHeight * perc);
    context.fill();

    drawCylinder(100, 100, 180, 180);
}

检查工作 Fiddle demo ...