前端开发js吸色器封装
摘要： 前端开发主界面要怎么写 前端开发的职业规划怎么写 怎么学习前端开发 html 代码 <!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”……
| 前端开发主界面要怎么写 |
| 前端开发的职业规划怎么写 |
| 怎么学习前端开发 |
html 代码
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″ />
<meta
name=”viewport”
content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no”
/>
<title>吸色器</title>
<style type=”text/css”>
* {
transition: 0s linear all;
}
html,
body {
min-height: 100%;
background-color: #ccc;
}
#inp_color {
width: 500px;
background-color: #ccc;
position: absolute;
top: 10px;
left: 10px;
text-shadow: 0 0 2px #333;
}
#box_color {
width: 290px;
height: 256px;
position: absolute;
top: 40px;
left: 10px;
}
#colorBar {
width: 20px;
height: 256px;
background: linear-gradient(
to bottom,
#ff0000,
#ff00ff,
#0000ff,
#00ffff,
#00ff00,
#ffff00,
#ff0000
);
position: absolute;
top: 0;
right: 0;
}
.bar_arrs {
position: absolute;
width: 34px;
height: 7px;
left: -7px;
margin: -6px 0 0 0;
top: 0;
cursor: n-resize;
}
.bar_arrs div {
position: absolute;
width: 0;
height: 0;
}
.bar_arrs .bar_arrs_larr {
left: 0;
border-top: 6px solid transparent;
border-left: 7px solid #858585;
border-bottom: 6px solid transparent;
}
.bar_arrs .bar_arrs_rarr {
right: 0;
border-top: 6px solid transparent;
border-right: 7px solid #858585;
border-bottom: 6px solid transparent;
}
</style>
</head>
<body>
<input id=”inp_color” value=”” />
<script>
function ColorBox(e, w, h) {
var that = this
this.w = w
this.h = h
that.e = document.getElementById(e)
that.colorBox = document.createElement(‘div’)
that.canvas = document.createElement(‘canvas’)
that.colorBar = document.createElement(‘div’)
that.colorBox.id = ‘box_color’
that.canvas.id = ‘canvas’
that.colorBar.id = ‘colorBar’
that.colorCanvas = ”
that.colorCtx = ”
that.hsb = { h: 360, s: 100, b: 100 }
that.rgb = { r: 255, g: 0, b: 0 }
that.position = { x: 50, y: 50 }
this.init()
this.drawColor(that.position)
}
ColorBox.prototype.init = function() {
var that = this
that.canvas.setAttribute(‘width’, this.w)
that.canvas.setAttribute(‘height’, this.h)
document.body.appendChild(that.colorBox)
that.colorBox.appendChild(that.canvas)
that.colorBar.innerHTML =
‘<div class=”bar_arrs”><div class=”bar_arrs_larr”></div><div class=”bar_arrs_rarr”></div></div>’
that.colorBox.appendChild(that.colorBar)
that.colorCanvas = document.getElementById(that.canvas.id)
that.colorCtx = that.colorCanvas.getContext(‘2d’)
that.colorCanvas.addEventListener(
‘mousedown’,
function(e) {
that.position.x = that.mouseX = e.pageX – 10
that.position.y = that.mouseY = e.pageY – 40
that.hsb.s = (that.mouseX * 100) / 256
that.hsb.b = 100 * (1 – that.mouseY / 256)
that.rgb.r = that.hsbToRgb(that.hsb).r
that.rgb.g = that.hsbToRgb(that.hsb).g
that.rgb.b = that.hsbToRgb(that.hsb).b
that.e.value =
‘rgba(‘ +
that.rgb.r +
‘,’ +
that.rgb.g +
‘,’ +
that.rgb.b +
‘,1)’
that.e.style.backgroundColor =
‘rgba(‘ +
that.rgb.r +
‘,’ +
that.rgb.g +
‘,’ +
that.rgb.b +
‘,1)’
that.drawColor(that.position)
},
false,
)
that.colorBar.addEventListener(
‘mousedown’,
function(e) {
var pposY = e.pageY – 40
that.hsb.h = 360 – Math.floor((pposY / that.h) * 360)
that.rgb.r = that.hsbToRgb(that.hsb).r
that.rgb.g = that.hsbToRgb(that.hsb).g
that.rgb.b = that.hsbToRgb(that.hsb).b
that.e.value =
‘rgba(‘ +
that.rgb.r +
‘,’ +
that.rgb.g +
‘,’ +
that.rgb.b +
‘,1)’
that.e.style.backgroundColor =
‘rgba(‘ +
that.rgb.r +
‘,’ +
that.rgb.g +
‘,’ +
that.rgb.b +
‘,1)’
document.getElementById(
that.colorBar.id,
).firstChild.style.top = pposY + ‘px’
that.drawColor(that.position)
},
false,
)
}
ColorBox.prototype.hsbToRgb = function(hsb) {
var rgb = {}
var h = hsb.h
var s = (hsb.s * 255) / 100
var v = (hsb.b * 255) / 100
if (s == 0) {
rgb.r = rgb.g = rgb.b = v
} else {
var t1 = v
var t2 = ((255 – s) * v) / 255
var t3 = ((t1 – t2) * (h % 60)) / 60
if (h == 360) h = 0
if (h < 60) {
rgb.r = t1
rgb.b = t2
rgb.g = t2 + t3
} else if (h < 120) {
rgb.g = t1
rgb.b = t2
rgb.r = t1 – t3
} else if (h < 180) {
rgb.g = t1
rgb.r = t2
rgb.b = t2 + t3
} else if (h < 240) {
rgb.b = t1
rgb.r = t2
rgb.g = t1 – t3
} else if (h < 300) {
rgb.b = t1
rgb.g = t2
rgb.r = t2 + t3
} else if (h < 360) {
rgb.r = t1
rgb.g = t2
rgb.b = t1 – t3
} else {
rgb.r = 0
rgb.g = 0
rgb.b = 0
}
}
return {
r: Math.round(rgb.r),
g: Math.round(rgb.g),
b: Math.round(rgb.b),
}
}
ColorBox.prototype.drawColor = function(position) {
var that = this
that.colorCtx.clearRect(
0,
0,
that.colorCanvas.width,
that.colorCanvas.height,
)
that.colorCtx.save()
that.colorCtx.beginPath()
that.colorCtx.fillStyle = ‘hsl(‘ + that.hsb.h + ‘,100%,50%)’
that.colorCtx.fillRect(
0,
0,
that.colorCanvas.width,
that.colorCanvas.height,
)
that.colorCtx.restore()
that.colorCtx.save()
that.colorCtx.beginPath()
var gra = that.colorCtx.createLinearGradient(
0,
0,
that.colorCanvas.width,
0,
)
gra.addColorStop(0, ‘rgba(255,255,255,1)’)
gra.addColorStop(1, ‘rgba(255,255,255,0’)
that.colorCtx.fillStyle = gra
that.colorCtx.fillRect(
0,
0,
that.colorCanvas.width,
that.colorCanvas.height,
)
that.colorCtx.restore()
that.colorCtx.save()
that.colorCtx.beginPath()
var gra2 = that.colorCtx.createLinearGradient(
0,
0,
0,
that.colorCanvas.height,
)
gra2.addColorStop(0, ‘rgba(0,0,0,0)’)
gra2.addColorStop(1, ‘rgba(0,0,0,1’)
that.colorCtx.fillStyle = gra2
that.colorCtx.fillRect(
0,
0,
that.colorCanvas.width,
that.colorCanvas.height,
)
that.colorCtx.restore()
that.colorCtx.save()
that.colorCtx.beginPath()
that.colorCtx.arc(
position.x,
position.y,
5,
0,
Math.PI * 2,
true,
)
that.colorCtx.strokeStyle =
position.x + position.y > that.colorCanvas.width * 0.5
? ‘#fff’
: ‘#000’
that.colorCtx.stroke()
that.colorCtx.restore()
}
ColorBox.prototype.windowToCanvas = function() {
var bbox = that.colorCanvas.getBoundingClientRect()
// console.log(bbox.x, bbox.y)
return { x: bbox.x, y: bbox.y }
}
window.onload = function() {
document.querySelector(‘#inp_color’).onclick = function() {
var colorBar = new ColorBox(‘inp_color’, 256, 256)
}
}
</script>
</body>
</html>
| 前端开发 分页怎么做 |
| mvc 开发 前端怎么做 |
| 客户端前端怎么开发 |
» 本文来自：前端开发者 » 《前端开发js吸色器封装》
» 本文链接地址：https://www.rokub.com/8125.html
» 您也可以订阅本站：https://www.rokub.com
近期评论