画布，javascript交互？

作为学校课程的一部分，我们正在学习使用HTML5的画布元素，这也意味着我们正在学习如何使用Javascript。任务是创建一些图形，并与这些图形进行某种交互

我决定创建一些简单的图表，让用户能够输入值并看到图表的变化

包含我绘制的一些图表，现在是棘手的部分-使用Javascript和创建交互。这可能很容易，但我以前从未接触过JQuery之外的Javascript，因此有点不知所措

假设我希望用户能够与底部的条形图交互，并填充1-5之间的值，使条形图相应地增长

画布代码很简单，如下所示：

function bars(){

var canvas = document.getElementById("bars");
if (canvas.getContext)
{   

var ctx = canvas.getContext("2d");

var bar1 = canvas.getContext("2d");
bar1.fillStyle = "rgba(0, 50, 0, .2)";
bar1.fillRect(20, 400, 30, 90);

var bar2 = canvas.getContext("2d");
bar2.fillStyle = "rgba(0, 50, 0, .4)";
bar2.fillRect(55, 360, 30, 130);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(90, 260, 30, 230);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(125, 290, 30, 200);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(160, 270, 30, 220);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(195, 250, 30, 240);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(230, 300, 30, 190);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(20, 400, 30, 90);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(55, 360, 30, 130);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(90, 260, 30, 230);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(125, 290, 30, 200);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(160, 270, 30, 220);

ctx.fillStyle = "rgba(0, 50, 0, .4)";
ctx.fillRect(195, 250, 30, 240);

ctx.fillStyle = "rgba(0, 50, 0, .2)";
ctx.fillRect(230, 300, 30, 190);

但我该怎么办呢？我是编程新手，我知道如何用选择和循环创建函数和控制流，你知道，我是一个初学者。创建用户控件的自然路径是什么？在我开始工作之前，我需要一些意见，这样我就不会朝着错误的方向工作。欢迎您在任何页面上提供关于如何使用或获得任何想法的好建议。 /托马斯

看一看。使用canvas来做相对简单的事情开始变得非常复杂，虽然它也支持交互，但这似乎总体上使生活变得更轻松。了解基本原理很重要，但不要试图在没有木工工具的情况下建造房子

如果你更感兴趣的是密谋，你应该看看

---

那么对于我们当中的冒险者来说，有哪些情节是3d的。尽管你应该努力做到这一点。

这是非常直截了当的。如果您对jQuery有一些经验，我建议将其包括在这里，这样会使事情更简单

假设您确实使用jQuery，只要在用户更改html输入中的值时调用bar函数即可。首先，只需更改bars声明，以便可以使用值调用它。像这样：

function bars(userVal) {
    // All your existing code ...
}

然后需要清除上次调用条形图时绘制的内容。比如：

function bars(userVal) {
    var canvas = document.getElementById("bars");
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        // Clear the bars that were drawn last time
        ctx.clearRect(x,y,w,h);
        // The rest of your existing code ...
    }
}

clearRect获取原点位置x和y以及高度和宽度w和h，并将清除该区域中的画布。因此，请输入绘图区域的必要限制

接下来，将文本输入添加到页面中，并在页面发生更改时使用jQuery调用条形图

$(document).ready(function() {
    $("input").on("change", function() {
        var value = $(this).val();
        bars(value);
    });
});

最后，您必须决定如何处理用户输入的值。这完全取决于您，但我想检查它是否有效的一个快速简单的测试就是在一个图形调用中使用一个数值

示例：

// This would change the start position of a bar
ctx.fillRect(userVal, 260, 30, 230);
// This would change the width of a bar
ctx.fillRect(90, 260, userVal, 230);
// This would change the colour of a bar
ctx.fillStyle = "rgba(userVal, 50, 0, .4)";

---

玩得开心。

非常有帮助，谢谢。我完全明白了。但是，不允许将JQuery用于此分配。我想知道，混合使用Javascript和JQuery被认为是好的还是坏的做法？JQuery是一个Javascript库，它是用Javascript编写的。。。i、 e.没有javascript就不能使用jQuery。jQuery是一个使用非常广泛的库，它非常容易获取，而且功能非常强大。我在我构建的绝大多数web应用程序上都使用它。是的，我的想法更多的是一个问题：开始用JavaScript编写JavaScript时是100%编写JavaScript，还是编写一些JavaScript，然后出于任何原因添加一些JQuery代码片段？在JQuery中编写应用程序时，您是否编写过纯JavaScript。。但这并不重要，真的。我现在一切正常，它需要一些造型和一些用户友好性，但一切都很好。再次感谢。