집 > 기사 > 웹 프론트엔드 > HTML5 기술을 사용하여 나만의 멋진 색상 선택기_html5 튜토리얼 기술 개발

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

WBOY원래의: 2016-05-16 15:48:401562검색

jquery/js를 사용하여 개발된 색상 선택기를 많이 보셨을 것입니다. 오늘은 HTML5 기술을 사용하여 더 나은 색상 선택기를 직접 구현해 보겠습니다. 모두가 좋아하길 바랍니다!

코드 복사

코드는 다음과 같습니다.

B " id= "bVal" />

RGB

HEX

코드는 매우 간단하며 클릭 요소와 색상 선택기를 표시하는 데 사용되는 요소의 두 부분으로 구성됩니다.

JavaScript 코드

코드 복사코드는 다음과 같습니다.

$(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 코드입니다. 다양한 색상의 베이스 플레이트를 선택할 수 있습니다. 여기에서는 다양한 옵션을 설정하기 위해 매개변수가 사용됩니다.

코드 복사

코드는 다음과 같습니다.

<수업 전 ="html" 이름="코드">

이제 이벤트를 추가합니다: mousemove, click 이벤트. 여기서는 jQuery를 사용하여 선택기를 표시하고 숨깁니다.

코드 복사

코드는 다음과 같습니다.

$('.preview' ).click (function(e) { // 미리보기 클릭 $('.colorpicker').fadeToggle("slow", "linear"); bCanPreview = true; }); 마우스 이동 선택한 개체에 대한 정보를 새로 고쳐야 합니다. 예를 들어 현재 색상

코드를 복사하세요

. 코드는 다음과 같습니다.

$('#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// 미리보기 업데이트 color
var pixelColor = "rgb( " pixel[0] ", " pixel[1] ", " pixel[2] ")"
$('.preview').css(' backgroundColor', pixelColor);// 업데이트 제어
$('#rVal').val(pixel[0])
$('#gVal').val(pixel[1]); >$('#bVal').val (픽셀[2]);
$('#rgbVal').val(pixel[0] ',' 픽셀[1] ',' 픽셀[2]);
var dColor = 픽셀[2] 256 * 픽셀[1] 65536 * 픽셀[0]
$('#hexVal').val('#' ('0000' dColor.toString(16)) .substr(-6));
}
});
$('#picker').click(function(e) { // 이벤트 핸들러 클릭
bCanPreview = !bCanPreview;
})

CSS 코드

다른 색상의 베이스 플레이트용 CSS:

코드 복사

코드는 다음과 같습니다:

/* colorpicker styles */ .colorpicker { background-color: #222222 ; 테두리 반경: 5px 5px 5px

너비: 460px;

}

#picker {
십자선;
float: 왼쪽;
테두리: 0; 🎜>.controls {
float: right;
margin: 10px
}
.controls > div {
border: 1px solid
margin-bottom: 5px ;
overflow: 숨겨진;
padding: 5px
}
.controls label {
float: left; 배경색: #121212; 테두리: 1px #2F2F2F;
색상: #DDDDDD;
float: 오른쪽; 글꼴 크기: 10px; >여백-왼쪽: 6px;
텍스트 정렬: 중앙;
텍스트 변환: 대문자;
너비: 75px;
.preview {
배경: url(" ../images/select.png") 투명하게 스크롤 중심 반복;
테두리 반경: 3px;
상자 그림자: 2px 2px 2px #444444;
커서: 포인터;
높이: 30px;
폭: 30px;
}

모두 마음에 드셨으면 좋겠습니다

성명：

이전 기사：Pictures_html5 튜토리얼 기술을 활용한 HTML5 음성 인식 태그 작성 방법다음 기사：Pictures_html5 튜토리얼 기술을 활용한 HTML5 음성 인식 태그 작성 방법

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

관련 기사