В настоящее время я работаю над компонентом выбора цвета, используя 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 подхода, но мне интересно, следует ли использовать холст для рисования такого статического изображения, не следует ли использовать холст в более динамичной и сложной среде?
Итак, каким образом я должен идти, чтобы реализовать простую цветовую палитру, или есть лучший подход?