W moim podstawowym narzędzia do malowania na płótnie chcę, aby użytkownik mógł zmienić kolor skoku za pomocą zbieracza kolorów. Chcę więc zmienić ctx.strokeStyle Udało mi się dodać zbierający kolor na płótnie, używając input type="color", ale zastanawiam się, jak mogę zrobić kolor skoku / pędzla w płótnie, aby zmienić według koloru wybranego w wyborce kolorów .

Więc to jest moje płótno w tej chwili:

enter image description here

I chcę, aby użytkownik zmienić kolor skoku, używając tego:

enter image description here

1
user3088233 11 grudzień 2013, 01:00

3 odpowiedzi

Najlepsza odpowiedź

Na podstawie opublikowanego zdjęcia wygląda na to, że chcesz rozwiązanie jak Marke Wysłany w swojej odpowiedzi. Chociaż w tekście wspomniałeś type="color". Jeśli chcesz użyć tego wejścia, możesz sprawdzić to jsfiddle działanie. W tym drugim przypadku pamiętaj, że wiele przeglądarki jeszcze go nie obsługuje. Kliknij Oto Jeśli chcesz zobaczyć listę przeglądarki, która go obsługuje.

Poniżej spróbuję wyszczególnić, jakie zmiany, które zrobiłem do twojego JSFiddle.

Po pierwsze, musisz ustawić zwrotny do koloru {x0}}. To oznacza, że wartość wejścia zmienia się, wywołuje metodę change. Funkcja change jest dostaje value wejścia i ustawić w zmiennej globalnej o nazwie color.

var color = "rgb(255,0,0)";
function change(e){
    color = this.value;
}
document.getElementById("color").onchange = change;

Druga zmiana była w funkcji draw. Przed remisem jest uzyskanie wartości w zmiennej color. W ten sposób następnym razem zmieniasz kolor, zaktualizuje kolor używany w skoku.

ctx.strokeStyle = color;

Wraz z tymi zmianami, jeśli w przyszłości zdecydujesz się użyć innego narzędzia, aby uzyskać kolor (na przykład, możesz sprawdzić Przeglądarka, aby sprawdzić, czy obsługuje input="color" i użyj innego wyboru kolorów w tym przypadku), wystarczy ustawić nowy kolor w zmiennej {X1}} .

3
wendelbsilva 10 grudzień 2013, 22:04

Oto prosty przykład zbiornika kolorów na płótnie "Narzędzia" używane do ustawienia bieżącego koloru (wypełnienie / udar) na płótnie rysunku:

JavaScript Paint Canvas, potrzebujesz pomocy ponownie lokalizowania przycisków?

W przypadku picker "Kolor", pomalowałbyś koło na płótnie Narzędzia, a następnie użyć kontekstu.getimagedata, aby uchwalić dane kolorów pikseli pod kursorem myszy.

var imgData=ctx.getImageData(mouseX,mouseY,1,1);

var data=imgData.data;

return("rgba("+data[0]+","+data[1]+","+data[2]+","+data[3]+")");

Po wybraniu koloru na płótnie Narzędzia można użyć kontekstu.STROKESTYLE i kontekstowy

2
Community 23 maj 2017, 12:29

Wszystko, co musisz zrobić, to uzyskać wartość wejścia kolorów i ustaw strokeStyle do tego.

Demo na żywo

var points=new Array(),
    colorInput = document.getElementById("color");

        function start(e){
          var mouseX = e.pageX - canvas.offsetLeft;
          var mouseY = e.pageY - canvas.offsetTop;
          paint = true;
          ctx.beginPath();
          ctx.moveTo(mouseX,mouseY);
          points[points.length]=[mouseX,mouseY];
        };

        function draw(e){

          if(paint){
             var mouseX = e.pageX - canvas.offsetLeft;
             var mouseY = e.pageY - canvas.offsetTop; 
             ctx.lineTo(mouseX,mouseY);
             ctx.stroke();  

             // set the value to the color input
             ctx.strokeStyle = colorInput.value;

             ctx.lineJoin = ctx.lineCap = 'round';

             points[points.length]=[mouseX,mouseY];
          }

        }
        function stop(e){
          paint=false;
         var s=JSON.stringify(points);
            localStorage['lines']=s;
        }  



        var paint=false;
        var canvas = document.getElementById('myCanvas');
        var ctx=canvas.getContext("2d");
        canvas.addEventListener('mousedown',start);
        canvas.addEventListener('mousemove',draw);
        canvas.addEventListener('mouseup',stop);
0
Loktar 10 grudzień 2013, 22:04