Можно ли применить CSS к тексту в теге canvas

Question

Можно ли применить CSS к тексту в теге canvas

0

У меня есть тег canvas, в который вложен текст внутри (отображается диаграммой jqplot):

<canvas id="myCanvas" width="578" height="200"></canvas>

есть ли способ сделать текст внутри холста красным? Я пробовал просто добавить css вот так:

<canvas id="myCanvas" width="578" height="200" style="color: red;"></canvas>

Из того, что я понимаю, полотно почти похоже на изображение. Означает ли это, что я не смогу выбрать вещи на этом холсте?

R Doolabh 28 апр. 2014, в 19:39

Источник

0

Не уверен, подходит ли он вашему варианту использования, но с SVG вы можете индивидуально нацеливать элементы и стилизовать их с помощью CSS (хотя правила отличаются от тех, которые применяются к HTML). Вот хороший проект, использующий семантические SVG-файлы таким образом: useiconic.com/tour
Billy Moon 28 апр. 2014, в 17:18

Теги:

javascript

jquery

css

html5

canvas

2 ответа

1

Вы можете сделать это с помощью Javascript:

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = '40pt Calibri';
  context.fillStyle = 'blue';
</script>

Источник

APAD1 28 апр. 2014, в 14:52

0

Можете ли вы объяснить, для чего 2d?
R Doolabh 28 апр. 2014, в 16:53
1

Это означает получить 2-мерный контекст рисования для данного холста, в отличие от 3-го контекста.
Logan Murphy 28 апр. 2014, в 16:54

Ещё вопросы

Не уверен, подходит ли он вашему варианту использования, но с SVG вы можете индивидуально нацеливать элементы и стилизовать их с помощью CSS (хотя правила отличаются от тех, которые применяются к HTML). Вот хороший проект, использующий семантические SVG-файлы таким образом: useiconic.com/tour
Можете ли вы объяснить, для чего 2d?
Это означает получить 2-мерный контекст рисования для данного холста, в отличие от 3-го контекста.

Logan Murphy · Accepted Answer · 2014-04-28T14-46-00.000Z

Поскольку вы используете jqplot вы должны посмотреть документацию, чтобы выяснить, как изменить цвет текста. Следующая веб-страница выглядит многообещающей, которая упоминает свойство textColor.

http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisLabelRenderer-js.html# $.jqplot.CanvasAxisLabelRenderer

Это выглядело также полезным

http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.tickRenderer

http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html# $.jqplot.AxisTickRenderer

В принципе, я попытался бы найти событие (крючок), которое вызывается до того, как будет сделан каждый тик. Выясните, какой тик вот-вот нарисован. Затем измените цвет текста на основе этой информации. Я считаю, что вы можете это сделать с тем, что я вам предоставил.

Я видел это сначала. Тем не менее, jqplot глупо и позволяет вам раскрашивать все галочки на вашей оси. Я хочу покрасить каждый тик своим цветом. Вот SO вопрос, который я написал об этом: stackoverflow.com/questions/23304935/…