0

作为学校课程的一部分，我们正在学习使用 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);

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

4

2 回答 2

0

这很简单。如果您对 jQuery 有一定的经验，我建议您将其包含在此处，这会使事情变得更简单。

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

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

然后你需要清除上次调用 bar() 时绘制的任何内容。就像是：

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 调用 bar()

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

玩得开心。

于 2012-04-10T13:17:00.667 回答
0

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

如果你对绘图更感兴趣，你应该看看flot。

然后对于我们中间的冒险家，有三个情节 3d。虽然你应该努力做到这一点。

于 2012-04-10T12:59:45.473 回答