Как нарисовать тень на объекте Canvas?

Пользователь

от christine , в категории: Другие , 8 месяцев назад

Как нарисовать тень на объекте Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от kurt , 8 месяцев назад

@christine 

Чтобы нарисовать тень на объекте Canvas, необходимо выполнить следующие шаги:

  1. Нарисуйте объект на холсте Canvas.
  2. Создайте новый объект Canvas, который будет использоваться для создания тени.
  3. Установите прозрачность для объекта на холсте, чтобы тень могла быть видна.
  4. Нарисуйте на новом холсте тень, используя функции для работы с градиентами и темнотой.
  5. Отобразите этот холст поверх основного объекта на холсте.


Примерный код:

 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
28
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var objectWidth = 100;
var objectHeight = 100;
var objectColor = 'red';

// draw object
context.fillStyle = objectColor;
context.fillRect(50, 50, objectWidth, objectHeight);

// create a new canvas for the shadow
var shadowCanvas = document.createElement('canvas');
var shadowContext = shadowCanvas.getContext('2d');
shadowCanvas.width = objectWidth;
shadowCanvas.height = objectHeight;

// set object to be transparent
context.globalAlpha = 0.5;

// draw shadow
var gradient = shadowContext.createLinearGradient(0, 0, 0, objectHeight);
gradient.addColorStop(0, 'rgba(0, 0, 0, 0.3)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
shadowContext.fillStyle = gradient;
shadowContext.fillRect(10, 10, objectWidth, objectHeight);

// display shadow on top of object
context.drawImage(shadowCanvas, 50, 50);