鼠標點擊更改畫布元素屬性

請參閱此小提琴：https://jsfiddle.net/1gb9a2x3/。鼠標點擊更改畫布元素屬性

我有一個全屏的HTML5畫布元素，有些塊隨機移動。這是一個很好的效果，我稍後會調整，但我現在要做的是改變用戶輸入個人或多個元素的一些屬性。所以，當用戶點擊某個按鈕時，改變顏色，移動它，隱藏它等等。我試圖操縱update函數在飛行，但不幸的是沒有運氣。在該示例中，目前沒有涵蓋用戶輸入的代碼，僅僅因爲我嘗試過的任何東西似乎都不起作用，因爲範圍問題，canvas元素或其他的限制。

順便說一句，我試圖使用jQuery。所以我的問題是：有沒有辦法做這樣一段簡單的jQuery的代碼：

$('button').click(function() { 
    Item[0].width = 10; 
    update(); 
});

讓我開始任何建議都歡迎。謝謝！

來源

2015-05-30 Ewinnn

你的代碼幾乎是正確的只是將其更改爲以下並添加一個按鈕

$('button').click(function() { 
    circles[1].size = Math.random() * 1000; 
    // no need for update since it is updated by function draw(); 
});

它會隨機設置大小圓圈1

您可以點擊此處查看 https://jsfiddle.net/xbjjrroy/

來源

2015-05-30 20:39:24 Molda

我不能讓我的代碼在工作，因爲我看不到的錯誤，但你可以做的就是聲明某種與它預定義的顏色排列的，像

fillColors = ["rgba(255,150, 0,","rgba(255, 255, 255,"];

然後canvas onclick，做一個for循環，將'圓圈'顏色設置爲數組中的下一個。（此外，請務必給項目對象的顏色屬性，並使用 ctx.fillStyle = this.color;在更新功能所以此工程）

canvas.onclick = function(){ 
    for(var i = 0; i < circles.length; i++){ 
     circles[i].color = fillColors[0] + circles[i].opacity + ')'; 
     // first output is "rgba(255,150, 0, opacity)" 
    } 
    //then move the color to the end of the array 
    var color1 = fillColors[0]; 
    fillColors.splice(0, 1); 
    fillColors.push(color1); 
}

我希望我幫助，祝你好運！

來源

2015-05-30 20:27:47 DaMuffiner

鼠標點擊更改畫布元素屬性

回答

相關問題