Комментарий: HTML5 Canvas предоставляет четыре значения атрибута для настройки теней для реализации текста тени, 3D -эффекта вытягивания тени и текста эффекта края размытия. Конкретный демонстрационный код выглядит следующим образом. Друзья, которые хотят учиться, могут ссылаться на это.
HTML5 Canvas предоставляет четыре значения атрибута для настройки теней:context.shadowcolor = red означает настройка цвета тени на красный
context.shadowoffsetx = 0 Указывает горизонтальное расстояние тени относительно текста, 0 указывает горизонтальные положения двух перекрытий
context.shadowoffsety = 0 указывает на вертикальное расстояние тени относительно текста, 0 указывает на вертикальные позиции двух перекрытий
context.shadowblur = 10 Shadow Blur эффект, тем больше значение, тем больше оно размытие.
Один из самых простых затененных кодов прямоугольника заключается в следующем:
context.shadowcolor = rgba (127,127,127,1);
context.shadowoffsetx = 3;
context.shadowoffsety = 3;
context.shadowblur = 0;
context.fillstyle = rgba (0, 0, 0, 0,8);
context.fillrect (10, HH+10, 200, Canvas.height/4-20);
Эффекты следующие:
Текст тени:
Просто установите значения ShadowOffSetx и ShadowOffSety, когда оба значения являются положительными, тень относится к праву нижней части текста.
квадратное смещение. Когда все значения отрицательны, тень смещена с верхней левой стороны текста.
3D эффект тяги тени:
Повторите текст, чтобы нарисовать неоднократно в той же положении и изменить ShadowOffSetx, ShadowOffsety, Shadowblur
Значение, которое постоянно перемещается от малого на большую, и его прозрачность продолжает увеличиваться. Тогда я получил текст эффекта тени.
Крайный эффект размытия текст:
Повторите в четырех направлениях на основе 3D -эффекта вытягивания тени, и получается текстовый эффект краевого перья.
Эффект бега:
Код последовательности:
<! Doctype html>
<html>
<голова>
<meta http-equiv = "x-ua-совместимый" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<название> Демо -версия Clip Clip </title>
<link href = "default.css" />
<Скрипт>
var ctx = null; // глобальная переменная 2D контекст
var ImageTexture = null;
window.onload = function () {
var canvas = document.getElementbyId ("text_canvas");
console.log (canvas.parentnode.clientwidth);
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientheight;
if (! canvas.getContext) {
console.log («Canvas не поддерживается. Пожалуйста, установите браузер, совместимый с HTML5.»);
возвращаться;
}
var context = canvas.getContext ('2d');
// раздел первый - тень и размытие
context.fillstyle = "черный";
context.fillrect (0, 0, canvas.width, canvas.height/4);
context.font = '60pt calibri';
context.shadowcolor = "белый";
context.shadowoffsetx = 0;
context.shadowoffsety = 0;
context.shadowblur = 20;
context.filltext ("Blur Canvas", 40, 80);
context.strokestyle = "rgba (0, 255, 0, 1)";
context.linewidth = 2;
context.stroketext ("Blur Canvas", 40, 80);
// Раздел второй - Shadow Font
var hh = canvas.height/4;
context.fillstyle = "белый";
context.fillrect (0, HH, Canvas.width, Canvas.height/4);
context.font = '60pt calibri';
context.shadowcolor = "rgba (127,127,127,1)";
context.shadowoffsetx = 3;
context.shadowoffsety = 3;
context.shadowblur = 0;
context.fillstyle = "rgba (0, 0, 0, 0,8)";
context.filltext ("Blur Canvas", 40, 80+HH);
// Раздел третий - эффект тени вниз
var hh = canvas.height/4 + hh;
context.fillstyle = "черный";
context.fillrect (0, HH, Canvas.width, Canvas.height/4);
для (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowoffsetx = i*2;
context.shadowoffsety = i*2;
context.shadowblur = i*2;
context.fillstyle = "rgba (127, 127, 127, 1)";
context.filltext ("Blur Canvas", 40, 80+HH);
}
// Раздел четвертый - эффект затухания
var hh = canvas.height/4 + hh;
context.fillstyle = "green";
context.fillrect (0, HH, Canvas.width, Canvas.height/4);
для (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowoffsetx = 0;
context.shadowoffsety = -i*2;
context.shadowblur = i*2;
context.fillstyle = "rgba (127, 127, 127, 1)";
context.filltext ("Blur Canvas", 40, 80+HH);
}
для (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowoffsetx = 0;
context.shadowoffsety = i*2;
context.shadowblur = i*2;
context.fillstyle = "rgba (127, 127, 127, 1)";
context.filltext ("Blur Canvas", 40, 80+HH);
}
для (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowoffsetx = i*2;
context.shadowoffsety = 0;
context.shadowblur = i*2;
context.fillstyle = "rgba (127, 127, 127, 1)";
context.filltext ("Blur Canvas", 40, 80+HH);
}
для (var i = 0; i <10; i ++)
{
context.shadowcolor = "rgba (255, 255, 255," + ((10-i)/10) + ")";
context.shadowoffsetx = -i*2;
context.shadowoffsety = 0;
context.shadowblur = i*2;
context.fillstyle = "rgba (127, 127, 127, 1)";
context.filltext ("Blur Canvas", 40, 80+HH);
}
}
</script>
</head>
<тело>
<h1> html5 canvas clip demo - от мрачной рыбы </h1>
<pre> заполнить и ход зажима </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>