Question

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

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

http://people.dsv.su.se/~tojo0551/graf/lines.html包含了我已经编写的一些图表，现在是使用Javascript和创建交互的棘手部分。这可能很容易，但我从来没有触及过JQuery之外的Javascript，因此有点不知所措。

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

Canvas代码很简单，看起来像这样：

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

但我从哪里开始呢？我是编程新手，我知道如何使用选择和循环创建函数和控制流程，你知道，我是一名初学程序员。创建用户控件的自然路径是什么？在我开始工作之前，我想要一些输入，所以我不会在错误的方向上工作。任何有关如何或任何想法的建议的网页都非常受欢迎。 /托马斯

Answer 1

看看fabricjs。使用canvas做相对简单的事情开始变得非常复杂，这似乎使生活更容易，尽管它也支持交互。了解基本原理很重要，但如果没有木工工具，不要试图建造房屋。

如果绘图是你感兴趣的东西，你应该看一下flot。

然后，对于我们中间的冒险者，有three绘制3d。虽然你应该努力。

Answer 2

这很简单。如果你有一些jQuery的经验，我建议把它包含在这里，它会让事情更简单。

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

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

然后你需要清除上次调用bars（）时绘制的内容。类似的东西：

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调用bars（）

$(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)";

玩得开心。

画布，javascript互动？

2 个答案: