저는 컴퓨터 그래픽에 능숙하지 않으며 HTML 페이지에 포함하기위한 자바 스크립트 도구로 색상 선택 도구를 만들어야합니다.자바 스크립트와 HTML 캔버스를 사용하여 Photoshop과 유사한 색상 선택기를 만듭니다.
먼저 포토샵의 사진을 보면 RGB 팔레트를 3 차원 매트릭스로 생각했습니다. 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>
이
내 생각이 내가 포토샵과 웹에서 볼 수있는 것들에 비해 너무 선형처럼 뭔가가 발생합니다. 나는이 같은 선택기에서 색상 맵핑 뒤에 논리를 알고 싶습니다 :
난 정말 algorythms 자체가 필요하지 않습니다, 나는 주로 논리를 이해하려고 노력 중이 야. 여기에 대한 코드를 참조 ColorPicker
를 사용 http://jsfiddle.net/maniator/GXuqb/2/
:
감사
감사합니다.하지만 저는 두 가지 이유로 처음부터 하나를 만들려고합니다. 그것의 재미와 imgs와 독립적 인 캔버스를 사용하여 –
"재미있게"부분은 확실히 가치가 있습니다! :) 나는 아마 그것을 할 것입니다. 건배. – techfoobar