html5 간단한 색상 선택기 배우기 _html5 튜토리얼 기술

다음은 브라우저가 html5를 지원해야 하는 소스코드입니다

코드 복사

코드는 다음과 같습니다.

< ;html>



< ;/canvas>

<스크립트 유형 ="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")
vargradient = cxt.createLinearGradient(0.5,0.5,0,150) ;
gradient.addColorStop(0 ,'#00ff00');
gradient.addColorStop(1,'#ff0000')
cxt.fillStyle=gradient(0,0) ,60,200);
var ox = can.offsetLeft
var oy = can.offsetTop;
varspan = document.createElement("input")
span.setAttribute("id"," 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")
vargradient = cxt.createLinearGradient(0.5,0.5,0,150); 🎜>varspan = 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);
}
}
}