ホームページ > ウェブフロントエンド > H5 チュートリアル > html5 簡単なカラーピッカーを学ぶ _html5 チュートリアルのスキル

html5 簡単なカラーピッカーを学ぶ _html5 チュートリアルのスキル

WBOY
リリース: 2016-05-16 15:51:21
オリジナル
1736 人が閲覧しました

以下は、ブラウザが HTML5 をサポートする必要があるソース コードです。

コードをコピーします。
コードは次のとおりです。



onmousemove="showCurrentColor(イベント)">





<スクリプトタイプ="text/javascript">
if(document.createElement("canvas")){
if(document.getElementById("colorPicker").getContext){
var can = document.getElementById( "colorPicker");
can .setAttribute("height",300);
var cxt = can.getContext("2d"); ;
gradient.addColorStop(0 ,'#00ff00');
cxt.fillStyle=gradient; ,60,200);
var ox = can.offsetLeft
var oy = can.offsetTop;
span.setAttribute("input"); rgba");
document.getElementById("textResult").appendChild(span);
}
}
function showCurrentColor(e){
var x = e.clientX - 8;
var y = e.clientY - 29;
var w = 10;
if(document.createElement("canvas")){
if(document.getElementById("colorPicker").getContext ){
var can = document .getElementById("colorPicker");
var cxt = can.getContext("2d");
var gradient = cxt.createLinearGradient(0.5,0.5,0,150); 🎜>var span = document.getElementById( "rgba");
var imgDatas = cxt.getImageData(ox,oy,10,200);
var imgData = imgDatas.data; *(w)*(y) ( x)*4 1];
var r = imgData[4 *(w)*(y) (x)*4];
var b = imgData[4 * (w)*(y) (x )*4 2];
var a = imgData[4 *(w)*(y) (x)*4 3];
span.value="r= " r " g=" g " b =" b " a=" a;
document.getElementById("textResult").appendChild(span);
}
}
}



関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート