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画布绘图应用程序：如何选择颜色？

回答

相关问题