畫布，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的互動？

回答

相關問題