使用 HTML5 Canvas 创建一个拾色器

  HTML       2015-12-13

创建 Canvas 应用是一件有意思且新奇的事情,甚至可以创建游戏;Canvas 在大多数的桌面和手机浏览器中都能够很好的支持,是比使用 Flash 更可行的解决方案;

本例中使用HTML5中 Canvas 来创建一个简易的拾色器(color picker),在此过程中,不需要任何的 Flash,有一个“文本编辑器”和一个“浏览器”即可。

开始之前,您可以在这里看看我们将要创建的应用的效果,您也可以在这里下载源文件。 如果您在本地测试这个实例,最好不要使用 Chrome 浏览器,因为 Chrome 的安全模块要求 script 只在线上工作(only work online)。

HTML

在这个例子中,HTML 使用的不多,我们需要做的就是创建一个Canvas,然后有两个文本框用于放置所点击颜色的 RGB 表示和 16 进制颜色值表示;代码如下:

  1. <canvas width="600" height="440" id="canvas_picker"></canvas>
  2. <div id="hex">HEX: <input type="text"></input></div>
  3. <div id="rgb">RGB: <input type="text"></input></div>

由于我们在一张背景图片拾取颜色,因此把 Canvas 的高度和宽度设置成了背景图片的高度和宽度;所点击的颜色显示在两个文本框中;
由于我们要用到 jQuery,因此代码中要包含jQuery库。

JavaScript

要使拾色器工作,首先,我们需要做的是获取 Canvas 和它的上下文,我们可以用一句代码,像这样:

  1. var canvas = document.getElementById('canvas_picker').getContext('2d');

紧接着,我们需要做的就是给 Canvas 元素设置一张背景图片,此过程中,我们需要创建一个 image 对象,并设置其 URL 属性,当图片加载完毕后,加载到 Canvas 中,代码如下:

  1. var img = new Image();
  2. img.src = 'image.jpg';
  3. $(img).load(function(){
  4. canvas.drawImage(img,0,0);
  5. });

下面我们应该考虑的是:当鼠标点击事件在 Canvas 中发生时,我们应该捕捉到该事件,并且获取用户点击鼠标的位置,代码可以这样写:

  1. $('#canvas_picker').click(function(event){
  2. var x = event.pageX - this.offsetLeft;
  3. var y = event.pageY - this.offsetTop;
  4. });

这两句代码的意思是获取用户点击的位置,我们所需做的就是获取其坐标,并减去 Canvas 元素的偏移量(offsetLeft 和 offsetTop); 这样就得到了相对于 Canvas 用户点击的位置;
下一步就是获取用户点击位置的 RGB 值,我们需要用到 getImageData() 函数,并把上面代码中 x,y 值传递进去:

  1. $('#canvas_picker').click(function(event){
  2. var x = event.pageX - this.offsetLeft;
  3. var y = event.pageY - this.offsetTop;
  4. var imgData = canvas.getImageData(x, y, 1, 1).data;
  5. var R = imgData[0];
  6. var G = imgData[1];
  7. var B = imgData[2];
  8. });

接下来就是把 RGB 值显示给用户:

  1. $('#canvas_picker').click(function(event){
  2. var x = event.pageX - this.offsetLeft;
  3. var y = event.pageY - this.offsetTop;
  4. var imgData = canvas.getImageData(x, y, 1, 1).data;
  5. var R = imgData[0];
  6. var G = imgData[1];
  7. var B = imgData[2];
  8. var rgb = R + ',' + G + ',' + B;
  9. $('#rgb input').val(rgb);
  10. });

现在已经可以得到用户点击位置的 RGB 值,不过,为了有更好的体验,我们同时显示点击位置的 16 进制值颜色值,把 RGB 值转换为 16 进制颜色值的代码如下:

  1. function rgbToHex(R,G,B) {
  2. return toHex(R)+toHex(G)+toHex(B)
  3. }
  4. function toHex(n) {
  5. n = parseInt(n,10);
  6. if (isNaN(n))
  7. return "00";
  8. n = Math.max(0,Math.min(n,255));
  9. return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
  10. }

我们已经完成了本例子的大部分功能,下面就是把16进制颜色值显示在文本框中:

  1. var hex = rgbToHex(R,G,B);
  2. $('#hex input').val('#' + hex);

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>拾色器事例代码</title>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <canvas width="600" height="440" id="canvas_picker"></canvas>
  10. <div id="hex">HEX: <input type="text"></input></div>
  11. <div id="rgb">RGB: <input type="text"></input></div>
  12. <script type="text/javascript">
  13. var canvas = document.getElementById('canvas_picker').getContext('2d');
  14. // 创建一个 image 对象
  15. var img = new Image();
  16. img.src = 'image.jpg';
  17. // 把图片设置到Canvas中
  18. $(img).load(function(){
  19. canvas.drawImage(img,0,0);
  20. });
  21. // RGB 转换成 HEX
  22. function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
  23. function toHex(n) {
  24. n = parseInt(n,10);
  25. if (isNaN(n)) return "00";
  26. n = Math.max(0,Math.min(n,255));
  27. return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
  28. }
  29. $('#canvas_picker').click(function(event){
  30. // 获取用户点击坐标
  31. var x = event.pageX - this.offsetLeft;
  32. var y = event.pageY - this.offsetTop;
  33. // 获取 RGB 值
  34. var img_data = canvas.getImageData(x, y, 1, 1).data;
  35. var R = img_data[0];
  36. var G = img_data[1];
  37. var B = img_data[2]; var rgb = R + ',' + G + ',' + B;
  38. // RGB 转成 HEX
  39. var hex = rgbToHex(R,G,B);
  40. // 显示颜色值
  41. $('#rgb input').val(rgb);
  42. $('#hex input').val('#' + hex);
  43. });
  44. </script>
  45. </body>
  46. </html>

总结

通过本事例我们应该意识到使用 Canvas 创建应用有很大的潜力;在其他地方有很多更好的例子,甚至很多人用Canvas 做游戏,Canvas 的巨大潜能等待你的挖掘。

原文地址:How to create a color picker with HTML5 Canvas

本文最后更新于2015-12-13 00:14:14