Tôi không hoàn toàn thông thạo Đồ họa Máy tính và cần tạo bộ chọn màu làm công cụ javascript để nhúng vào trang HTML.Tạo Bộ chọn Màu, tương tự như Photoshop, sử dụng Javascript và HTML Canvas
Đầu tiên, và nhìn vào Photoshop, tôi nghĩ về bảng màu RGB như là ma trận ba chiều. Nỗ lực đầu tiên của tôi envolved:
<script type="text/javascript">
var rgCanvas = document.createElement('canvas');
rgCanvas.width = 256;
rgCanvas.height = 256;
rgCanvas.style.border = '3px solid black';
for (g = 0; g < 256; g++){
for (r = 0; r < 256; r++){
var context = rgCanvas.getContext('2d');
context.beginPath();
context.moveTo(r,g);
context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
context.lineTo(r+1,g+1);
context.stroke();
context.closePath();
}
}
var bCanvas = document.createElement('canvas');
bCanvas.width = 20;
bCanvas.height = 256;
bCanvas.style.border = '3px solid black';
for (b = 0; b < 256; b++){
var context = bCanvas.getContext('2d');
context.beginPath();
context.moveTo(0,b);
context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
context.lineTo(20, b);
context.stroke();
context.closePath();
}
document.body.appendChild(rgCanvas);
document.body.appendChild(bCanvas);
</script>
này dẫn đến một cái gì đó giống như
Suy nghĩ của tôi là đây là quá tuyến tính, so với những người tôi thấy trong Photoshop và trên web. Tôi muốn biết logic đằng sau ánh xạ màu trong bộ chọn như sau:
Tôi không thực sự cần bản thân algorythms, tôi chủ yếu cố gắng hiểu logic.
Cảm ơn
cảm ơn, nhưng tôi đang cố gắng xây dựng một từ đầu vì hai lý do: cho niềm vui của nó và chỉ sử dụng canvas, độc lập từ imgs –
"vì niềm vui của nó" một phần chắc chắn là giá trị nó! :) Tôi cũng có thể làm điều đó. Chúc mừng. – techfoobar