Question

我希望能够使用用户的输入动态创建图表和绘图。

如果我有2个宽度和高度的文本框，我希望能够根据用户输入的值绘制一个矩形，如果他们更改输入字段中的值，我希望绘图更改。

帆布能够做到这一点吗？它需要与JavaScript一起工作吗？

感谢

Answer 1

是的，您可以侦听文本输入并发出适当的画布绘图命令。

所有画布命令必须在javascript中发布...所以是的，需要javascript。

这是带注释的代码和演示：http://jsfiddle.net/m1erickson/f6E6Y/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // get a reference to the canvas and context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // vars for current width and height of a canvas rectangle
    var width=50;
    var height=35;

    // references to the input-text elements 
    // used to let user change the rect width & height
    var $width=document.getElementById('width');
    var $height=document.getElementById('height')

    // set the initial input-text values to the width/height vars
    $width.value=width;
    $height.value=height;

    // call the draw command
    draw();

    // listen for keyup events on width & height input-text elements
    // Get the current values from input-text & set the width/height vars
    // call draw to redraw the rect with the current width/height values
    $width.addEventListener("keyup", function(){
        width=this.value;
        draw();
    }, false);

    $height.addEventListener("keyup", function(){
        height=this.value;
        draw();
    }, false);


    // draw() clears the canvas and redraws the rect
    // based on user input
    function draw(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.fillRect(40,40,width,height);
    }

}); // end $(function(){});
</script>
</head>
<body>
    Width:<input type="text" id="width"><br>
    height:<input type="text" id="height"><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

根据用户输入更新画布图

1 个答案: