var bCanPreview = true; // boleh pratonton
// buat kanvas dan objek konteks
var canvas = document.getElementById('picker') ;
var ctx = canvas.getContext('2d'); .drawImage( imej, 0, 0, image.width, image.height); // lukis imej pada kanvas
}
// pilih colorwheel yang diingini
var imagesrc="images/colorwheel1.png ";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
imagesrc="images/colorwheel3.png";
pecah; >kes ' 5':
imagesrc="images/colorwheel5.png";
break;
}
image.src = imageSrc; function(e ) { // pengendali pergerakan tetikus
if (bCanPreview) {
// dapatkan koordinat kedudukan semasa
var canvasOffset = $(canvas).offset(); .floor( e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top); , canvasY, 1, 1);
var pixel = imageData.data;
// kemas kini warna pratonton
var pixelColor = "rgb(" pixel[0] ", " pixel[1] ", " piksel[2 ] ")";
$('.preview').css('backgroundColor', pixelColor
// kawalan kemas kini
$('#rVal').val(pixel[); 0]) ;
$('#gVal').val(piksel[1]); '). val(piksel[0] ',' piksel[1] ',' piksel[2]); >$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6)); pemilih') .klik(fungsi(e) { // klik pengendali acara
bCanPreview = !bCanPreview;
}); pratonton klik
$('.colorpicker').fadeToggle("perlahan", "linear"); 🎜>Semua Orang Seperti yang anda lihat, ini adalah kod js yang sangat pendek yang digunakan untuk mencipta kanvas dan objek baharu, dan kemudian kami melukis plat warna bulat. Anda boleh memilih plat asas warna yang berbeza. Parameter digunakan di sini untuk menetapkan pilihan yang berbeza. Seperti berikut:
Salin kod
Kod adalah seperti berikut:
