画布，JavaScript的互动？

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

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

http://people.dsv.su.se/~tojo0551/graf/lines.html包含我绘制的几个图表，现在出现了棘手的部分 - 使用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);

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

来源

2012-04-10 tomasantonj

这很简单。如果你有一些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调用杆（），每当它改变

$(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-10 13:17:00

非常有帮助，谢谢。我明白这一切。但是，不允许在此任务中使用JQuery。我想知道，是否将JavaScript和JQuery混合使用是好的或不好的做法？ – tomasantonj 2012-04-10 13:43:26

jQuery是一个JavaScript库，它是用javascript编写的......即不用没有javascript的jQuery。 jQuery是一个使用非常广泛的库，它非常容易拾取，而且非常强大。我在构建的绝大多数Web应用程序上使用它。 – 2012-04-10 14:28:55

是的，我的想法更多的是当您开始使用JavaScript编写JavaScript时是否写了100％的JavaScript，或者您是否因为某种原因编写了一些JavaScript并添加了几个JQuery代码片段？在JQuery中编写应用程序时，你有没有编写纯JavaScript代码？但这并不重要，真的。我现在所有的工作，它需要一些样式和一些用户友好，但它都很好。非常感谢。 – tomasantonj 2012-04-10 16:09:45

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

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

然后对于我们之间的冒险，有three绘制3d。尽管你应该做到这一点。

来源

2012-04-10 12:59:45 Neil

画布，JavaScript的互动？

回答

相关问题