HTML5 Canvas: добавление теней

Содержание
  1. Тени В холсте HTML5 вы можете добавлять тени на фигуру, линию, текст или изображение, которые могут создать ощущение третьего измерения. Чтобы добавить тени с помощью холста HTML5, вы можете использовать следующие свойства контекста холста. shadowOffsetX shadowOffsetY shadowColor shadowBlur Свойство shadowOffsetX () Это свойство используется для получения или установки горизонтального расстояния тени от формы. Вы можете использовать положительные или отрицательные значения для управления положением тени. Значение по умолчанию — ноль. Синтаксис: ctx.shadowOffsetX = h_distance; Где h_distance (type: number) — горизонтальное расстояние тени от формы. Свойство shadowOffsetY () Это свойство используется для получения или установки вертикального расстояния тени от формы. Вы можете использовать положительные или отрицательные значения для управления положением тени. Значение по умолчанию — ноль. Синтаксис: ctx.shadowOffsetX = v_distance; Где v_distance (type: number) — вертикальное расстояние тени от формы. Свойство shadowColor () Это свойство используется для получения или установки цвета, используемого для теней. Синтаксис: ctx.shadowColor Где shadowColor (type: string) — это цвет CSS. Свойство shadowBlur () Это свойство используется для получения или установки текущего уровня размытия, применяемого к теням. ctx.shadowBlur = blur_value Где blur_value — это степень размытия (тип: число), которая применяется к тени. Пример: холст HTML5, добавляющий тень Следующий веб-документ создает серию квадратов с разной степенью тени размытие. Вывод: Код: Холст HTML5 - тень var canvas = document.getElementById ("DemoCanvas"); if ( canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.shadowColor = "черный"; ctx.shadowBlur = 6; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 6; ctx.shadowColor = "оранжевый" ; ctx.strokeRect (25, 25, 200, 200); ctx.shadowColor = "зеленый"; ctx.strokeRect (50, 50, 200, 200); ctx.shadowColor = "синий"; ctx.strokeRect (75, 75, 200, 200); ctx.shadowColor = " red "; ctx.strokeRect (100, 100, 200, 200);}

    Вот еще один пример:

    Вывод:


    Код:

          HTML5 Canvas - тень       var canvas = document.getElementById ("  DemoCanvas "); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.rect (100, 40, 200, 100); ctx.fillStyle = 'green'; ctx.shadowColor = '#  898 '; ctx.shadowBlur = 20; ctx.shadowOffsetX = 20; ctx.shadowOffsetY = 20; ctx.fill ();}
    
    
    Пример: холст HTML5, добавляющий тень на текст
    
    
    Следующий веб-документ создает тень на тексте.
    
    
    Вывод:
    
    
    
    
    
    Код:
     Холст HTML5 - тень       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {va  r ctx = холст.getContext ('2d');  ctx.fillStyle = 'зеленый';  ctx.shadowColor = '# 898';  ctx.shadowBlur = 20;  ctx.shadowOffsetX = 20;  ctx.shadowOffsetY = 20; //ctx.fill ();  ctx.font = 'курсив 32px без засечек';  ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50);  ctx.fillStyle = 'красный';  ctx.shadowColor = '# 998';  ctx.shadowBlur = 1;  ctx.shadowOffsetX = 9;  ctx.shadowOffsetY = 7; //ctx.fill ();  ctx.font = 'курсив 32px без засечек';  ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 150);  }
    
    
    Редактор кода:
    
    
    См. перо  Общий редактор html css от w3resource (@ w3resource) onCodePen.
    
    
    
  2. Свойство shadowOffsetX ()
  3. Свойство shadowOffsetY ()
  4. Свойство shadowColor ()
  5. Свойство shadowBlur ()

Тени

В холсте HTML5 вы можете добавлять тени на фигуру, линию, текст или изображение, которые могут создать ощущение третьего измерения. Чтобы добавить тени с помощью холста HTML5, вы можете использовать следующие свойства контекста холста.

  • shadowOffsetX
  • shadowOffsetY
  • shadowColor
  • shadowBlur

Свойство shadowOffsetX ()

Это свойство используется для получения или установки горизонтального расстояния тени от формы. Вы можете использовать положительные или отрицательные значения для управления положением тени. Значение по умолчанию — ноль.

Синтаксис:

 ctx.shadowOffsetX = h_distance; 

Где h_distance (type: number) — горизонтальное расстояние тени от формы.

Свойство shadowOffsetY ()

Это свойство используется для получения или установки вертикального расстояния тени от формы. Вы можете использовать положительные или отрицательные значения для управления положением тени. Значение по умолчанию — ноль.

Синтаксис:

 ctx.shadowOffsetX = v_distance; 

Где v_distance (type: number) — вертикальное расстояние тени от формы.

Свойство shadowColor ()

Это свойство используется для получения или установки цвета, используемого для теней.

Синтаксис:

 ctx.shadowColor 

Где shadowColor (type: string) — это цвет CSS.

Свойство shadowBlur ()

Это свойство используется для получения или установки текущего уровня размытия, применяемого к теням.

 ctx.shadowBlur = blur_value 

Где blur_value — это степень размытия (тип: число), которая применяется к тени.

Пример: холст HTML5, добавляющий тень

Следующий веб-документ создает серию квадратов с разной степенью тени размытие.

Вывод:

Код:

      Холст HTML5 - тень       var canvas = document.getElementById ("DemoCanvas"); if (  canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.shadowColor = "черный"; ctx.shadowBlur = 6; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 6; ctx.shadowColor = "оранжевый"  ; ctx.strokeRect (25, 25, 200,  200); ctx.shadowColor = "зеленый"; ctx.strokeRect (50, 50, 200, 200); ctx.shadowColor = "синий"; ctx.strokeRect (75, 75, 200, 200); ctx.shadowColor = "  red "; ctx.strokeRect (100, 100, 200, 200);}     

Вот еще один пример:

Вывод:


Код:

      HTML5 Canvas - тень       var canvas = document.getElementById ("  DemoCanvas "); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.rect (100, 40, 200, 100); ctx.fillStyle = 'green'; ctx.shadowColor = '#  898 '; ctx.shadowBlur = 20; ctx.shadowOffsetX = 20; ctx.shadowOffsetY = 20; ctx.fill ();}    

Пример: холст HTML5, добавляющий тень на текст

Следующий веб-документ создает тень на тексте.

Вывод:

Код:

      Холст HTML5 - тень       var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {va  r ctx = холст.getContext ('2d');  ctx.fillStyle = 'зеленый';  ctx.shadowColor = '# 898';  ctx.shadowBlur = 20;  ctx.shadowOffsetX = 20;  ctx.shadowOffsetY = 20; //ctx.fill ();  ctx.font = 'курсив 32px без засечек';  ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 50);  ctx.fillStyle = 'красный';  ctx.shadowColor = '# 998';  ctx.shadowBlur = 1;  ctx.shadowOffsetX = 9;  ctx.shadowOffsetY = 7; //ctx.fill ();  ctx.font = 'курсив 32px без засечек';  ctx.fillText ('Учебное пособие по HTML5 Canvas', 10, 150);  }    

Редактор кода:

См. перо Общий редактор html css от w3resource (@ w3resource) onCodePen.

Оцените статью
nanomode.ru
Добавить комментарий