前端开发者nodejs前端开发案例|java前端开发需要哪些技术|秦皇岛前端开发javaee
代码片段 1
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″ />
<meta name=”Keywords” content=”” />
<meta name=”Description” content=”” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes,minimal-ui”
/>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>简单模仿Photoshop拾色器</title>
<style>
h2 {
text-align: center;
}
.palette {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 600px;
height: 362px;
padding: 12px;
margin: auto;
border: 1px solid #CCC;
background-color: #DCDCDC;
}
.palette>div {
position: relative;
height: 100%;
border: 1px solid #CCC;
}
.palette>div:nth-of-type(1) {
width: 60%;
margin-right: 2%;
overflow: hidden;
float: left;
}
.palette>div:nth-of-type(2) {
width: 5%;
float: left;
}
.palette>div:last-child {
border-width: 0;
width: 30%;
height: 100%;
text-align: right;
float: right;
}
.palette>div>input {
width: 70%;
margin: 0 0 1em .2em;
padding: .3em;
}
.palette>div>input[type=”button”]:nth-of-type(2) {
margin-bottom: 5em;
}
.palette>div>i {
position: absolute;
;
pointer-events: none;
}
.palette>div:first-child>i {
left: 100%;
top: 0;
width: 9px;
height: 9px;
border: 1px solid #000;
border-radius: 50%;
margin: -5px 0 0 -5px;
box-shadow: 0 0 1px 1px #FFF
}
.palette>div:nth-of-type(2)>i {
left: 0;
top: 0;
width: 100%;
height: 10px;
margin-top: -5px;
}
.palette>div:nth-of-type(2)>i:before,
.palette>div:nth-of-type(2)>i:after {
position: absolute;
content: “”;
width: 0;
height: 0;
border: 5px solid transparent;
}
.palette>div:nth-of-type(2)>i:before {
left: -5px;
top: 0;
border-left-color: #000;
}
.palette>div:nth-of-type(2)>i:after {
right: -5px;
top: 0;
border-right-color: #000;
}
</style>
</head>
<body>
<h2>简单模仿Photoshop拾色器</h2>
<div class=”palette”>
<div></div>
<div></div>
<div>
<input type=”button” value=”确定” />
<input type=”button” value=”取消” /> rgb
<input type=”text” readonly=”readonly” /> #
<input type=”text” readonly=”readonly” />
</div>
</div>
<script>
//<![CDATA[
!function () {
var stage = document.querySelector(“.palette”),
divs = stage.children,
cvs = document.createElement(“canvas”),
cvs1 = cvs.cloneNode(false),
i = document.createElement(“i”),
i1 = i.cloneNode(false),
ctx1 = cvs1.getContext(“2d”),
ch = divs[1].clientHeight,
cw = divs[1].clientWidth;
cvs.width = divs[0].clientWidth;
cvs.height = divs[0].clientHeight;
cvs1.height = ch;
cvs1.width = cw;
divs[0].appendChild(cvs);
divs[0].appendChild(i);
divs[1].appendChild(cvs1);
divs[1].appendChild(i1);
while (–ch >= -1) {
ctx1.beginPath();
ctx1.strokeStyle = “hsl(” + ch + “,100%,50%)”;
ctx1.moveTo(0, ch);
ctx1.lineTo(cw, ch);
ctx1.stroke();
ctx1.closePath();
}
function setPalette(data) {
var w = cvs.width, h = cvs.height, r = data[0], g = data[1], b = data[2], a = data[3], o, i = 0, j, ctx = cvs.getContext(“2d”), imgData = ctx.getImageData(0, 0, w, h), data2 = imgData.data, w2 = w * 4;
for (; i < h; i++) {
for (j = 0; j < w2; j += 4) {
o = 255 * (h – i) / h;
data2[i * w2 + j] = o – (o – r * (h – i) / h) * j / w2 | 0;
data2[i * w2 + j + 1] = o – (o – g * (h – i) / h) * j / w2 | 0;
data2[i * w2 + j + 2] = o – (o – b * (h – i) / h) * j / w2 | 0;
data2[i * w2 + j + 3] = 255;
}
}
ctx.putImageData(imgData, 0, 0);
setColor(data);
}
function setColor(data) {
var inps = stage.querySelectorAll(“input[type=’text’]”);
inps[0].value = data[0] + “,” + data[1] + “,” + data[2];
inps[1].value = hex(data[0]) + hex(data[1]) + hex(data[2]);
}
function hex(n) {
return n > 16 ? n.toString(16).toUpperCase() : “0” + n.toString(16).toUpperCase();
}
cvs.addEventListener(“click”, function (e) {
var x = e.offsetX, y = e.offsetY;
e.preventDefault;
e.stopPropagation();
setColor(this.getContext(“2d”).getImageData(x, y, 1, 1).data);
i.style.left = x + “px”;
i.style.top = y + “px”;
}, false);
cvs1.addEventListener(“click”, function (e) {
var x = e.offsetX, y = e.offsetY, data = this.getContext(“2d”).getImageData(x, y, 1, 1).data;
e.preventDefault;
e.stopPropagation();
setPalette(data);
i1.style.top = y + “px”;
i.style.left = i.style.top = “auto”;
}, false);
setPalette(ctx1.getImageData(0, 0, 1, 1).data);
}();
//]]>
</script>
</body>
</html>
ext6js 前端开发|web前端开发技术——html_css_javascript|jsp前端界面开发
» 本文来自：前端开发者 » 《WEB前端仿制PS拾色器》
» 本文链接地址：https://www.rokub.com/5271.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册