用canvas实现一个colorpicker
2017-02-09 21:07
316 查看
http://www.cnblogs.com/ufex/p/6382982.html
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker。今天canvas系列就用canvas做一个colorpicker。
**********************************************************************
View Code
**********************************************************************
写在最后:
最终写完效果在自己玩耍的过程中,发现浏览器对于canvas的过渡色实现有点问题。chrome很明显,FF稍微好一点。
如图: 按道理来说,最下边选到的颜色应该都是rgb(0,0,0)才对,但是图上可见,有些地方并不是~~~
大多数还是000,某些点某个通道有可能会出现1。原因未知。
尝试了email给chrome邮箱,可能我英语比较差人家没看懂,也可能我问题没描述清楚,反正后来没有回复,之后的浏览器更新也没有处理。
相应的,css3的过渡色则没有一丁点问题。
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker。今天canvas系列就用canvas做一个colorpicker。
**********************************************************************
效果图和demo
突然翻到了之前用js和dom写的一个colorpicker,比较挫,扔张图就好(old)View Code
**********************************************************************
写在最后:
最终写完效果在自己玩耍的过程中,发现浏览器对于canvas的过渡色实现有点问题。chrome很明显,FF稍微好一点。
如图: 按道理来说,最下边选到的颜色应该都是rgb(0,0,0)才对,但是图上可见,有些地方并不是~~~
大多数还是000,某些点某个通道有可能会出现1。原因未知。
尝试了email给chrome邮箱,可能我英语比较差人家没看懂,也可能我问题没描述清楚,反正后来没有回复,之后的浏览器更新也没有处理。
相应的,css3的过渡色则没有一丁点问题。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background: #535353; padding: 0; margin: 0; } canvas { cursor: crosshair; } #cur { width: 3px; height: 3px; outline: 2px solid #535353; margin-left: -1px; margin-top: -1px; position: absolute; } .wrapper { position: relative; } #color_show { width: 50px; height: 50px; background: #f00; } .panel { width: 200px; height: 200px; position: fixed; top: 20px; right: 20px; background-color: #fff; padding: 10px; text-align: center; line-height: 2em; } </style> </head> <body> <div class="wrapper"> <canvas id="canvas" width="600" height="600"></canvas> <em id="cur"></em> <div class="panel"> <div id="color_show"></div> <label> rgb <input type="text" class="color_input" value="" id="rgb_value"> </label><br> <label> hex <input type="text" class="color_input" value="" id="hex_value"> </label> </div> </div> <script> (function() { var width = 256; var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var curColor = 'rgba(255,0,0,1)'; var cur = document.getElementById('cur'); var rgbValue = document.getElementById('rgb_value'); var hexValue = document.getElementById('hex_value'); var colorShow = document.getElementById('color_show'); var aColorInput = document.getElementsByClassName('color_input'); function colorBar() { var gradientBar = ctx.createLinearGradient(0, 0, 0, width); gradientBar.addColorStop(0, '#f00'); gradientBar.addColorStop(1 / 6, '#f0f'); gradientBar.addColorStop(2 / 6, '#00f'); gradientBar.addColorStop(3 / 6, '#0ff'); gradientBar.addColorStop(4 / 6, '#0f0'); gradientBar.addColorStop(5 / 6, '#ff0'); gradientBar.addColorStop(1, '#f00'); ctx.fillStyle = gradientBar; ctx.fillRect(0, 0, 20, width); } function rgb2hex(rgb) { var aRgb = rgb instanceof Array ? rgb : (rgb.split(',') || [0, 0, 0]); var temp; return [ (temp = Number(aRgb[0]).toString(16)).length == 1 ? ('0' + temp) : temp, (temp = Number(aRgb[1]).toString(16)).length == 1 ? ('0' + temp) : temp, (temp = Number(aRgb[2]).toString(16)).length == 1 ? ('0' + temp) : temp, ].join(''); } function hex2rgb(hex) { if(hex.length == 3) { hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; } return [ parseInt(hex[0] + hex[1], 16), parseInt(hex[2] + hex[3], 16), parseInt(hex[4] + hex[5], 16), ].join(); } function putCurDom(color) { if(/([0-9a-f]{3}|[0-9a-f]{6})/i.test(color)) { // hex color = hex2rgb(color); } else if(color instanceof Array) { color = color.join(','); } else if(/\d{1,3}(\,\d{1,3}){2}/i.test(color)) { } else { return; } } function colorBox(color) { // 底色填充,也就是(举例红色)到白色 var gradientBase = ctx.createLinearGradient(30, 0, width + 30, 0); gradientBase.addColorStop(1, color); gradientBase.addColorStop(0, 'rgba(255,255,255,1)'); ctx.fillStyle = gradientBase; ctx.fillRect(30, 0, width, width); // 第二次填充,黑色到透明 var my_gradient1 = ctx.createLinearGradient(0, 0, 0, width); my_gradient1.addColorStop(0, 'rgba(0,0,0,0)'); my_gradient1.addColorStop(1, 'rgba(0,0,0,1)'); ctx.fillStyle = my_gradient1; ctx.fillRect(30, 0, width, width); } function init() { colorBar(); colorBox(curColor); bind(); } function bind() { can.addEventListener('click', function(e) { var ePos = { x: e.offsetX || e.layerX, y: e.offsetY || e.layerY } var rgbaStr = '#000'; if(ePos.x >= 0 && ePos.x < 20 && ePos.y >= 0 && ePos.y < width) { // in rgbaStr = getRgbaAtPoint(ePos, 'bar'); colorBox('rgba(' + rgbaStr + ')'); } else if(ePos.x >= 30 && ePos.x < 30 + width && ePos.y >= 0 && ePos.y < width) { rgbaStr = getRgbaAtPoint(ePos, 'box'); } else { return; } outColor(rgbaStr.slice(0, 3).join()); cur.style.left = ePos.x + 'px'; cur.style.top = ePos.y + 'px'; cur.style.outlineColor = (rgbaStr[0] > 256 / 2 || rgbaStr[1] > 256 / 2 || rgbaStr[2] > 256 / 2) ? '#000' : '#fff'; }); can.addEventListener('mousedown', function(e) { var ePos = { x: e.layerX || e.offsetX, y: e.layerY || e.offsetY } if(ePos.x >= 30 && ePos.x < 30 + width && ePos.y >= 0 && ePos.y < width) { document.onmousemove = function(e) { var pos = { x: e.clientX, y: e.clientY } pos.x = pos.x < 30 ? 30 : pos.x && (pos.x > (30 + width - 1) ? (30 + width - 1) : pos.x); pos.y = pos.y < 0 ? 0 : pos.y && (pos.y > (width - 1) ? (width - 1) : pos.y); rgbaStr = getRgbaAtPoint(pos, 'box'); cur.style.left = pos.x + 'px'; cur.style.top = pos.y + 'px'; cur.style.outlineColor = (rgbaStr[0] > 256 / 2 || rgbaStr[1] > 256 / 2 || rgbaStr[2] > 256 / 2) ? '#000' : '#fff'; outColor(rgbaStr.slice(0, 3).join()); }; document.onmouseup = function() { // outColor(rgbaStr.slice(0, 3).join()); document.onmouseup = document.onmousemove = null; } } }); } function outColor(rgb) { rgbValue.value = rgb; hexValue.value = rgb2hex(rgb); colorShow.style.backgroundColor = 'rgb(' + rgb + ')'; } function getRgbaAtPoint(pos, area) { if(area == 'bar') { var imgData = ctx.getImageData(0, 0, 20, width); } else { var imgData = ctx.getImageData(0, 0, can.width, can.height); } var data = imgData.data; var dataIndex = (pos.y * imgData.width + pos.x) * 4; return [ data[dataIndex], data[dataIndex + 1], data[dataIndex + 2], (data[dataIndex + 3] / 255).toFixed(2), ]; } init(); })() </script> </body> </html>
相关文章推荐
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
- 用HTML5的canvas实现一个炫酷时钟效果
- Javascript HTML5 Canvas实现的一个画板
- HTML5 Canvas中实现绘制一个像素宽的细线
- HTML5 Canvas画线技巧――实现绘制一个像素宽的细线
- Html5 Canvas+Javascript实现一个简单画图程序(三)
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
- 用canvas 来实现一个菊花
- 发现一个Javascript+Canvas实现的照片人脸识别
- 每日一个js实例1---纯js与canvas实现心电图网格绘制
- 用canvas绘制一个圆形,实现绕着一个中心运动
- 用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具(转)
- Html5 Canvas+Javascript实现一个简单画图程序(二)
- Html5 Canvas+Javascript实现一个简单画图程序(一)
- HTML5 Canvas中实现绘制一个像素宽的细线
- Canvas---Canvas事件处理、Canvas元素的鼠标点击事件处理、实现一个元素管理器