Button CSS, SVG или Canvas, какой формат выбрать?

Основные примеры создания новых объектов форм для расширения HTML 5.

Для создания новых объектов форм также появляются три пути, чтобы получить представление об их преимуществах и недостатках, сравним с созданием простой настраиваемой кнопки в каждом формате.

Кнопка CSS 3

Синяя

Эти кнопки основаны на стандартных HTML-тегах, <button> для первых двух, <input> для последних и настраиваются с помощью таблицы стилей. HTML-теги можно объединить для создания более сложных объектов, таких как, например, аборсентный список.

Эти кнопки CSS совместимы с современными браузерами.

<![if gte IE 9]> 
<link href="button.css" rel="stylesheet" type="text/css" />
<![endif]>

Объекты SVG или Canvas такой возможности не предлагают, придется прибегать к альтернативным плагинам или фреймворкам для старых браузеров.

Кнопка SVG

SVG button

Кнопка SVG позволяет визуально определять эффекты стиля из программного обеспечения типа Inkscape. К сожалению рендеринг может отличаться в зависимости от браузеров (кнопка уродлива под Chrome).

Эта демонстрация служит прежде всего для того, чтобы увидеть, как пользователь может взаимодействовать с объектом SVG. Этот формат позволяет расширить HTML 5 новыми, более сложными объектами, позволяя взаимодействовать с конкретными частями этого объекта. Достаточно связать обработчики событий с тегом, как это сделано в этом примере.

Баттон Канвас

Третья возможность - использование Canvas. Получить совместимый рендеринг проще, чем в SVG, но создавать интерактивные составные объекты будет так же сложно, как создавать игру. Этот формат подходит для создания новых объектов с небольшим взаимодействием пользователей, например, часов.

Вывод: Выберите подходящий формат для каждого использования

При создании объекта SVG или Canvas трудно написать код, совместимый со всеми браузерами, каждый из которых имеет интерпретацию, когда при реализации этих форматов. Поэтому основная часть работы заключается в решении проблем совместимости, что является тратой времени, если не найти виджеты, готовые к использованию.
Желательно использовать:

Исходные коды

CSS

HTML-код кнопок CSS:

<div class="buttonbar">  		
    <button class="button red">Red button</button></li>
    <button class="button blue">Blue button</button>
    <input type="button" value="Gray input" class="button gray">
</div>

Код CSS:

.button, .button:visited 
{
  color: #fff; 
  text-decoration: none;
  border-radius: 6px;  
  box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.6);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  border-right: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  font-family:Calibri, Arial;
  margin-left:4px;
  font-size: 16px; 
  padding: 1px 8px 3px 8px; 
}
.button:active
{
  top: 1px;
  left:1px; 
}
.gray.button, .gray.button:visited
{
  background-color:#CCCCCC;
  box-shadow: inset 1px 1px 2px 0 rgba(255,255,255,0.6), 
  inset -1px -1px 1px 0 rgba(100,120,140,0.6),
   1px 2px 4px 0 rgba(0,0,0,0.6);
  color:#333; 
  border-left:1px solid #999; 
  border-top:1px solid #999; 
  text-shadow:none;	
}
.gray.button:hover
{
  background-color:#999;
  color:#111;
}

Полный код CSS. Для голубых и красных кнопок только изменяются свойства цвета.

SVG

Код SVG:

<svg width="132" height="36"  id="svg1"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs
     id="defs4">
    <linearGradient id="gradient1">
      <stop id="stop1" style="stop-color:#eee;stop-opacity:1;" offset="0" />
      <stop id="stop2" style="stop-color:#aaa;stop-opacity:0;" offset="1" />
    </linearGradient>
    <linearGradient xlink:href="#gradient1" id="gradient2"
       x1="0" y1="28" x2="0" y2="1"
       gradientUnits="userSpaceOnUse" />
	 <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="144" height="38">
          <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
          <feOffset in="blur-out"  dx="2" dy="2"/> 
          <feBlend in="SourceGraphic"  mode="normal"/>   
  </defs>
  <g id="" class="buttonbar"  onmousedown="svgDown()" onmouseover="svgOver()"
 onmouseout="svgOut()" onmouseup="svgUp()">
  <rect id="svgbutton" x="0" y="0" rx="8" ry="6" width="122" height="28"
	 stroke="#000066"  
	 style="fill:url(#gradient2);fill-rule:evenodd;stroke:#000000;
     stroke-width:1px;stroke-linecap:butt;
     stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
	 filter="url(#drop-shadow)"
	 />
  <text x="28" y="18" fill="black"
    font-family="Calibri, Arial" font-size="15" font-weight="500">
    SVG button
  </text>
  <g>
</svg>

Код JavaScript, связанный с кодом SVG :

function svgOver()
{
  document.getElementById("stop2").setAttribute('style',
    "stop-color:#000;stop-opacity:0;");
}
function svgOut()
{
  document.getElementById("stop2").setAttribute('style',
    "stop-color:#666;stop-opacity:0;");
}
function svgDown()
{
  var button= document.getElementById("svg1");
  button.style.margin="1px 0 0 1px";
  var x = document.getElementById("svgStorage");
  x.innerHTML="Clicked on SVG button";
}
function svgUp()
{
  var button= document.getElementById("svg1");
  button.style.margin="0";	
  var x = document.getElementById("svgStorage");
  x.innerHTML="";	
}

Функция ассоциируется с тем, что мышь переключается на кнопку или выходит из нее, кнопка нажимается (svgDown) или отпускается (svgUp).

Холсты

Код Канваса:

<canvas id="mycanvas" width="128" height="36"
 onmousedown="canvasDown(this)"  onmouseup="canvasUp(this)"
 onmouseover="canvasOver()" onmouseout="canvasOut()">
</canvas>

<script>
canvasOut();
</script>

Код JavaScript для рисования кнопки в Canvas :

function makeButton(x, y, w, h, radius, label, color)
{
  var canvas = document.getElementById("mycanvas"); 
  var context = canvas.getContext("2d");
  // clear background
  context.beginPath();
  context.fillStyle="white";
  context.fillRect(0,0, 126, 36);
  // draw button
  var r = x + w;
  var b = y + h;
  context.moveTo(x+radius, y);
  context.lineTo(r-radius, y);
  context.quadraticCurveTo(r, y, r, y+radius);
  context.lineTo(r, y+h-radius);
  context.quadraticCurveTo(r, b, r-radius, b);
  context.lineTo(x+radius, b);
  context.quadraticCurveTo(x, b, x, b-radius);
  context.lineTo(x, y+radius);
  context.quadraticCurveTo(x, y, x+radius, y);
  // background gradient 
  var backgrad = context.createLinearGradient(1,1,0,30);
  backgrad.addColorStop(0, '#5EF');
  backgrad.addColorStop(0.5, color);
  context.fillStyle = backgrad;
  // drop shadow
  context.shadowBlur = 3;
  context.shadowOffsetX = 2;
  context.shadowOffsetY = 2;
  context.shadowColor = "#669";  
  context.fill();
  // the following lines before stroke are required for Chrome
  context.shadowBlur = 0;  
  context.shadowOffsetX = 0;
  context.shadowOffsetY = 0;
  context.stroke(); 
   // label with shadowing
  context.beginPath();
  context.font = "12pt Calibri,Arial";
  context.fillStyle = "#FFF";
  context.shadowBlur = 0;
  context.shadowOffsetX = -1;
  context.shadowOffsetY = -1;
  context.shadowColor = "#669";  
  context.fillText(label, x+w*0.1, y+h*0.66);
}

Код, связанный с событиями:

function canvasUp(button)
{
 button.style.margin="0";		
 document.getElementById("canvasStorage").innerHTML="";
}
function canvasDown(button)
{
 button.style.margin="1px 0 0 1px";	
 document.getElementById("canvasStorage").innerHTML="Clicked on Canvas button";
}
function canvasOver()
{
 makeButton(0,0,120,28,8, "Canvas button", '#19B');     
}
function canvasOut()
{
 makeButton(0,0,120,28,8, "Canvas button", '#2AC');     
}

Это те же события, что и для SVG, но на этот раз нужно полностью перерисовать кнопку, чтобы изменить цвета.

Полный код JavaScript.

См. также