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

以下は、ブラウザが 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);
}
}
}