HTML5 テクノロジーを使用して、独自のクールなカラーピッカー_html5 チュートリアル スキルを開発します

var bCanPreview = true; // プレビュー可能
// キャンバスとコンテキスト オブジェクトを作成
var Canvas = document.getElementById('picker') ;
var ctx = Canvas.getContext('2d');
// アクティブなイメージを描画
var image = new Image();
ctx .drawImage( image, 0, 0, image.width, image.height); // キャンバスに画像を描画します
}
// 希望のカラーホイールを選択します
var imagerc="images/colorwheel1.png ";
switch ($(canvas).attr('var')) {
case '2':
imagesrc="images/colorwheel2.png";
break;
case '3' :
images/colorwheel3.png";
ケース '4':
images/colorwheel4.png"; >case ' 5':
imagesrc="images/colorwheel5.png";
break;
image.src = imageSrc;
$('#picker').mouse( 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 ピクセル = imageData.data;
// プレビューの色を更新します
var ピクセルカラー = "rgb(" ピクセル[0] ", " ピクセル[1] ", "ピクセル[2 ] ")";
$('.preview').css('backgroundColor', ピクセルカラー);
// コントロールを更新します
$('#rVal').val(pixel[ 0]) ;
$('#gVal').val(ピクセル[1]);
$('#rgbVal'); '). val(ピクセル[0] ',' ピクセル[1] ',' ピクセル[2]); var dColor = ピクセル[1] 65536 * ピクセル[0]; >$( '#hexVal').val('#' ('0000' dColor.toString(16)).substr(-6));
}
}); picker') .click(function(e) { // クリック イベント ハンドラー
bCanPreview = !bCanPreview;
});
$('.preview').click(function(e) { //プレビュークリック
$('.colorpicker').fadeToggle("slow", "linear");

}; 🎜>全員 ご覧のとおり、これは新しいキャンバスとオブジェクトを作成するために使用される非常に短い js コードであり、円形のカラー プレートを描画します。さまざまな色のベースプレートをお選びいただけます。ここではパラメータを使用してさまざまなオプションを設定します。次のように:





コードをコピー


コードは次のとおりです: