Есть ли способ рисовать простые формы с помощью JavaScript в браузере без холста?

Question

Я работаю над клиентом чата на C #, который должен иметь значок отправки при отправке сообщения. Иконка не может быть изображением из-за характера моей программы. Все сообщения отображаются в веб-браузере, который постоянно изменяется. Есть ли способ нарисовать круг, который может немного изменить цвет или размер, не полагаясь на html5 / canvas, или что-то вроде flash / java. Я не могу гарантировать, что любая из этих платформ будет существовать на клиентских компьютерах.

Answer 1

Unicode содержит кружок (●), поэтому он будет вести себя как текстовый элемент. Вы можете измерить это и покрасить это соответственно. Это также будет работать со старыми браузерами.

http://www.fileformat.info/info/unicode/char/25cf/index.htm

Answer 2

Да, вы можете. Просто используйте элемент <div> и стилизуйте его. Квадрат с одинаково закругленными углами становится кругом.

Проверьте это: http://jsfiddle.net/E4B5p/

.circle {
    moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    -khtml-border-radius: 200px;
    border-radius: 200px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #000;
    margin: 20px;
    height: 100px;
    width: 100px;
}

Answer 3

Вы можете использовать чистые CSS для рисования простых форм, используя несколько хитрых приемов: см. CSS-полигоны

Answer 4

Метод Доминика будет работать, другой путь - использовать что-то вроде SVG.

   **<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
  </svg> **

Оба хороши, SVG легче анимировать, если вам кажется, что

Answer 5

Как уже упоминалось, круги можно нарисовать с помощью CSS3. Определив ваши круги в классах, легко изменить природу круга, используя javascript, например:

<style type="text/css">
.circle {width:4px; height:4px; border-radius:4px; border:2px solid green; background:green;}
.red {border: 2px solid red; background-color:red;}
</style>

<div id="target" class="circle" onclick="document.getElementById('target').className += ' red';"></div>

Обратите внимание, что ни одно из представленных решений не поддерживается в IE. Для поддержки кругов CSS в IE вам нужно использовать библиотеку типа pie: http://css3pie.com/