【发布时间】：2012-04-05 14:09:53
【问题描述】：
我目前正在使用 HTML、CSS 和 Javascript 开发颜色选择器组件，一个主要问题是我应该如何实现这样的调色板：
忽略IE8或更早版本引入的浏览器兼容性问题，我有3种方法来实现：
-
<img>方式：这很简单，多年来被许多颜色选择器组件使用，我们只需使用
<img src="palette.png" />包含与上述完全相同的图像。问题是
<img>会引入额外的网络往返，虽然我们可以使用 dataURI 来防止它，但图像数据对我来说有点太大。 -
<div>方式：这样我们应该使用2个
<div>元素，其中一个提供从左到右的线性渐变，另一个提供从上到下的alpha渐变，样式应该是：<style> #map { width: 400px; height: 400px; background: -webkit-gradient( linear, left top, right top, color-stop(0%,#ff0000), color-stop(16.67%,#ffff00), color-stop(33.33%,#00ff00), color-stop(50%,#00ffff), color-stop(66.67%,#0000ff), color-stop(83.33%,#ff00ff), color-stop(100%,#ff0000) ); } #overlay { width: 400px; height: 400px; background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 1)) ); } </style> <div id="palette"><div id="overlay"></div></div>效果很好，但问题是，这个方法只引入了 2 个样式元素，这 2 个
<div>元素没有任何语义含义，也不能充当通用容器或块，这是 违反语义 HTML。 -
<canvas>方式：<canvas>提供了非常灵活的图形 API 来实现这样的调色板，我使用这些代码来绘制它：var context = canvas.getContext('2d'); var palette = context.createLinearGradient(0, 0, 360, 0); palette.addColorStop(0 / 6, '#ff0000'); palette.addColorStop(1 / 6, '#ffff00'); palette.addColorStop(2 / 6, '#00ff00'); palette.addColorStop(3 / 6, '#00ffff'); palette.addColorStop(4 / 6, '#0000ff'); palette.addColorStop(5 / 6, '#ff00ff'); palette.addColorStop(6 / 6, '#ff0000'); context.fillStyle = palette; context.fillRect(0, 0, 360, 360); var overlay = context.createLinearGradient(0, 0, 0, 360); overlay.addColorStop(0, 'rgba(0, 0, 0, 0)'); overlay.addColorStop(1, 'rgba(0, 0, 0, 1)'); context.fillStyle = overlay; context.fillRect(0, 0, 360, 360);和上面2种方法一样好用，但是我想知道我是否应该使用canvas来绘制这样的静态图像，不应该在更动态和复杂的环境中使用canvas吗？
那么我应该采用哪种方式来实现一个简单的调色板，还是有更好的方法？
【问题讨论】：
-
使用几个
<div>s 与您的HTML 是否语义无关。流行语不是很有趣吗？