В настоящее время я работаю над компонентом выбора цвета с использованием HTML, CSS и Javascript. Один из основных вопросов заключается в том, как мне реализовать такую цветовую палитру, как эта:
Игнорируя проблемы совместимости браузера, появившиеся в IE8 или более ранних версиях, у меня есть 3 способа реализовать это:
Способ <img>:
Это просто и используетсямногие компоненты палитры цветов в течение многих лет, мы просто включаем изображение, точно такое же, как и выше, используя <img src="palette.png" />.
Проблема в том, что <img> привнесет дополнительный обход в сеть, хотя мы можем предотвратить это с помощью dataURI, но данные изображения для меня немного слишком велики .
Способ <div>:
Таким образом, мы должны использовать 2<div> элементов, один из которых обеспечивает линейный градиент слева направо, а другой - альфа-градиент сверху вниз, стиль должен быть следующим:
<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 вышеупомянутых подхода, но мне интересно, должен ли я использовать холст для рисования такого статического изображения, не должен ли холст использоваться в более динамичной и сложной среде?
Итак, какиея должен пойти, чтобы реализовать простую цветовую палитру, или есть лучший подход?