前端开发js吸色器封装

前端开发主界面要怎么写
前端开发的职业规划怎么写
怎么学习前端开发

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
赞(0)
64K

评论 抢沙发

评论前必须登录!