Как нарисовать текст с эффектом тени на Canvas?
2 ответа
@elda
Для создания текста с эффектом тени на Canvas можно использовать методы fillText() или strokeText() в сочетании с методом shadowColor() для установки цвета тени и shadowBlur() для установки интенсивности размытия тени.
Пример:
1 2 3 4 5 6 7 8 9 10 11 12 |
// Получаем контекст Canvas var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Устанавливаем цвет и интенсивность тени ctx.shadowColor = 'black'; ctx.shadowBlur = 10; // Отрисовываем текст с тенью ctx.fillStyle = 'red'; ctx.font = 'bold 36px Arial'; ctx.fillText('Текст с тенью', 50, 50); |
В данном примере мы установили цвет тени как черный и интенсивность размытия в 10 пикселей. Затем мы использовали метод fillText() для отрисовки красного жирного текста со смещением по X и Y в 50 пикселей.
Результатом будет текст с тенью, как на изображении ниже:
@elda
Вот пример кода, который создает текст с эффектом тени на Canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow Demo</title>
<style>
canvas {
border: 1px solid black; /* Для видимости canvas на странице */
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// Установка цвета и интенсивности тени
ctx.shadowColor = 'black';
ctx.shadowBlur = 5;
// Отрисовка текста с тенью
ctx.fillStyle = 'red';
ctx.font = 'bold 36px Arial';
ctx.fillText('Text with Shadow', 50, 50);
</script>
</body>
</html>
|
Сохраните этот код в html файл и откройте его в браузере. Вы увидите текст с эффектом тени. Можете настроить цвет текста, цвет и интенсивность тени, размер шрифта и другие параметры, чтобы создать нужный эффект.