HTM5畫布繪圖應用程序：如何選擇顏色？

我在用HTML5和Javascript構建這個繪圖應用程序。HTM5畫布繪圖應用程序：如何選擇顏色？

我已經可以在畫布上繪畫，但是當能夠選擇不同的顏色並將其用作在畫布上繪畫時，我感覺卡住了。

這是我目前的JS：

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var radius = 10; 
var dragging = false; 

context.lineWidth = radius * 2; 

var putPoint = function(e){ 
    if(dragging){ 
     context.lineTo(e.offsetX, e.offsetY); 
     context.stroke(); 
     context.beginPath(); 
     context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2); 
     context.fill(); 
     context.beginPath(); 
     context.moveTo(e.offsetX, e.offsetY); 
    } 
} 

var engage = function(e){ 
    dragging = true; 
    putPoint(e); 
} 

var disengage = function(){ 
    dragging = false; 
} 


canvas.addEventListener('mousedown', engage); 
canvas.addEventListener('mousemove', putPoint); 
canvas.addEventListener('mouseup', disengage); 

/////////////////////

這裏的鏈接到codepen拿到我在那裏一個明確的想法：

https://codepen.io/teenicarus/pen/oGVwdB

如何使人們有可能點擊在不同的divs，所以我可以使用他們的顏色？

我欣賞所有答案。

來源

2017-10-20 Thierry Diallo

什麼是您的實際問題？如何綁定點擊處理程序？如何在畫布上設置顏色？ –

@EvanKnowles是的，如何設置畫布上的顏色。例如：當我點擊紅色時，顏色紅色彈出在畫布上 –

您可以通過設置畫布的'fillStyle'和'strokeStyle'來更改畫布的顏色。 –

你需要做的第一件事是建立在你的代碼的頂部的顏色變量來保存當前顏色的值用戶使用：

var color = "black"; // Initial, default color

現在，你需要讓所有的HTML顏色元素並將clickeventListener應用於每個DOM（html元素）對象。爲了讓所有的色彩元素，你可以這樣做：

var colors = document.getElementsByClassName("color");

然後你可以通過每個色彩元素的循環，並通過這樣的單擊事件監聽器添加到它：

for (var i = 0; i < colors.length; i++) { 
    colors[i].addEventListener('click', changeColor, false); // Adds the click event listener to each color element 
}

以上代碼說，一旦一個顏色元素被點擊，它將調用changeColor函數。因此，我們可以編寫獲取我們點擊和的color值更改爲我們在（由要素定義的顏色data-color屬性點擊現在

var changeColor = function(e) { 
    color = this.getAttribute("data-color"); // Change the color to what is defined in "data-color" 
}

顏色元素的顏色的功能，每次你點擊在你的顏色的HTML元素時，changeColor函數將被調用，這樣的color值更改爲您在data-color定義特定元素的值。

現在，所有你需要做的是將顏色應用到你的平局方法（在您的putPoint函數中），以便它顯示在畫布上。您可以通過使用：

context.strokeStyle = color; 
context.fillStyle = color;

這將改變筆畫顏色和內部/填充顏色。

可以在這裏找到一個工作示例：https://codepen.io/clapynick/pen/pWYrPj?editors=1010

來源

2017-10-20 12:23:29

完美的，正是我所期待的！ –

HTM5畫布繪圖應用程序：如何選擇顏色？

回答

相關問題