作爲學校課程的一部分,我們正在學習如何使用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
非常有幫助,謝謝。我明白這一切。但是,不允許在此任務中使用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