html – 创建调色板,还是或?

我正在使用 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 bottom,from(rgba(0,0)),to(rgba(0,1))
        );
    }
</style>

<div id="palette"><div id="overlay"></div></div>

它的工作原理完美,但问题是,该方法仅引入2个元素作为样式,2< div>元素没有任何语义含义,不能作为通用的容器或块,这是违反语义HTML的.
>< canvas>办法:

<画布>提供非常灵活的图形API来实现这样一个调色板,我用这些代码绘制它:

var context = canvas.getContext('2d');

var palette = context.createLinearGradient(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,360);

var overlay = context.createLinearGradient(0,360);
overlay.addColorStop(0,'rgba(0,0)');
overlay.addColorStop(1,1)');
context.fillStyle = overlay;
context.fillRect(0,360);

它与上述两种方法一样,但我想知道是否应该使用画布来绘制静态图像,不应该在更动态和复杂的环境中使用画布?

那么我应该怎么去实现一个简单的调色板,还是有更好的方法

解决方法

如果您想使用图像,但不想要额外的请求,可以使用 data URI
<img width="184" height="184" title="" alt="" src="data:image/png;base64,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" />

Demo

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些