
Quote from lolo on April 28, 2025, 4:34 pmКанва стирает текст который я добавляю через скрипт
Canvas erases the text that I add via scriptBeginjs const canvas = document.getElementById('CardCanvas'); const ctx = canvas.getContext('2d'); // Функция для рисования изогнутого текста function drawCurvedText(options) { // Параметры по умолчанию const { text = 'Curved Text', x = canvas.width / 2, y = canvas.height / 2, radius = 100, startAngle = Math.PI * 0.8, // 144° endAngle = Math.PI * 0.2, // 36° fillStyle = '#000000', fontSize = 24, fontFamily = 'Arial', textBaseline = 'middle', textAlign = 'center' } = options; // Настройки текста ctx.font = `${fontSize}px ${fontFamily}`; ctx.fillStyle = fillStyle; ctx.textBaseline = textBaseline; ctx.textAlign = textAlign; // Рассчитываем углы для каждого символа const chars = text.split(''); const angleStep = (endAngle - startAngle) / (chars.length - 1); chars.forEach((char, i) => { const angle = startAngle + i * angleStep; // Рассчитываем позицию символа const charX = x + Math.cos(angle) * radius; const charY = y + Math.sin(angle) * radius; // Поворачиваем контекст ctx.save(); ctx.translate(charX, charY); ctx.rotate(angle + Math.PI/2); // Рисуем символ ctx.fillText(char, 0, 0); ctx.restore(); }); } drawCurvedText({ text: '• Circular Text Example •', x: 100, y: 100, radius: 50, startAngle: 0, endAngle: Math.PI * 2, fillStyle: '#3F51B5', fontSize: 16 }); Endjs
Канва стирает текст который я добавляю через скрипт
Canvas erases the text that I add via script
Beginjs
const canvas = document.getElementById('CardCanvas');
const ctx = canvas.getContext('2d');
// Функция для рисования изогнутого текста
function drawCurvedText(options) {
// Параметры по умолчанию
const {
text = 'Curved Text',
x = canvas.width / 2,
y = canvas.height / 2,
radius = 100,
startAngle = Math.PI * 0.8, // 144°
endAngle = Math.PI * 0.2, // 36°
fillStyle = '#000000',
fontSize = 24,
fontFamily = 'Arial',
textBaseline = 'middle',
textAlign = 'center'
} = options;
// Настройки текста
ctx.font = `${fontSize}px ${fontFamily}`;
ctx.fillStyle = fillStyle;
ctx.textBaseline = textBaseline;
ctx.textAlign = textAlign;
// Рассчитываем углы для каждого символа
const chars = text.split('');
const angleStep = (endAngle - startAngle) / (chars.length - 1);
chars.forEach((char, i) => {
const angle = startAngle + i * angleStep;
// Рассчитываем позицию символа
const charX = x + Math.cos(angle) * radius;
const charY = y + Math.sin(angle) * radius;
// Поворачиваем контекст
ctx.save();
ctx.translate(charX, charY);
ctx.rotate(angle + Math.PI/2);
// Рисуем символ
ctx.fillText(char, 0, 0);
ctx.restore();
});
}
drawCurvedText({
text: '• Circular Text Example •',
x: 100,
y: 100,
radius: 50,
startAngle: 0,
endAngle: Math.PI * 2,
fillStyle: '#3F51B5',
fontSize: 16
});
Endjs