HTML5 기술을 사용하여 나만의 멋진 색상 선택기_html5 튜토리얼 기술 개발

$(function(){
var bCanPreview = true; // 미리보기 가능
// 캔버스 및 컨텍스트 객체 생성
var canvas = document.getElementById('picker') ;
var ctx = canvas.getContext('2d');
// 활성 이미지 그리기
var image = new Image()
image.onload = function() {
ctx .drawImage( image, 0, 0, image.width, image.height); // 캔버스에 이미지를 그립니다
}
// 원하는 색상환 선택
var Imagesrc="images/colorwheel1.png ";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
imagesrc="images/colorwheel3.png";
break
case '4':
imagesrc="images/colorwheel4.png"
>case '5':
imagesrc="images/colorwheel5.png";
break;
}
image.src = imageSrc;$('#picker').mousemove( function(e ) { // 마우스 이동 핸들러
if (bCanPreview) {
// 현재 위치의 좌표 가져오기
var canvasOffset = $(canvas).offset()
var canvasX = Math .floor( e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top)
// 현재 픽셀 가져오기
var imageData = ctx.getImageData(canvasX , canvasY, 1, 1);
var pixel = imageData.data;
// 미리보기 색상 업데이트
var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", " pixel[2 ] ")";
$('.preview').css(' backgroundColor', pixelColor)
// 업데이트 제어
$('#rVal').val(pixel[ 0]) ;
$('#gVal').val(pixel[1])
$('#bVal').val(pixel[2])
$('#rgbVal ').val(pixel[0] ',' pixel[1] ',' pixel[2]);
var dColor = pixel[2] 256 * pixel[1] 65536 * pixel[0]
$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6))
}
}); picker') .click(function(e) { // 클릭 이벤트 핸들러
bCanPreview = !bCanPreview;
})
$('.preview').click(function(e) { // 미리보기 클릭
$('.colorpicker').fadeToggle("slow", "linear")
bCanPreview = true;
}); 🎜>여러분 보시다시피 새로운 캔버스와 객체를 생성하고 원형 색판을 그리는 데 사용되는 매우 짧은 js 코드입니다. 다양한 색상의 베이스 플레이트를 선택할 수 있습니다. 여기에서는 다양한 옵션을 설정하기 위해 매개변수가 사용됩니다.





코드 복사