HTML5 Canvas Shadow_html5 튜토리얼 기술을 사용하는 방법에 대한 데모 예시

HTML5 Canvas는 그림자 설정을 위해 네 가지 속성 값을 제공합니다.
context.shadowColor = "red"는 그림자 색상을 빨간색으로 설정한다는 의미입니다.
context.shadowOffsetX = 0은 TEXT를 기준으로 그림자의 수평 거리를 의미하고, 0은 그림자 색상을 빨간색으로 설정한다는 의미입니다. 두 개의 수평 위치가 겹칩니다
context.shadowOffsetY = 0은 TEXT를 기준으로 그림자의 수직 거리를 의미하고, 0은 둘의 수직 위치가 일치한다는 것을 의미합니다.
context.shadowBlur = 10 그림자 흐림 효과, 값이 클수록, 흐려짐이 심할수록.
그림자가 있는 가장 간단한 직사각형 코드는 다음과 같습니다.
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 그림자 효과를 기반으로 네 방향으로 반복하여 가장자리 페더링 텍스트 효과를 얻습니다.
실행 효과:

시퀀스 코드:

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

<머리>




<스크립트>
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("캔버스는 지원되지 않습니다. HTML5 호환 브라우저를 설치하세요.");
반환;
}
var context = canvas.getContext('2d');
// 섹션 1 - 그림자 및 흐림
context.fillStyle="black";
context.fillRect(0, 0, canvas.width, canvas.height/4);
context.font = '60pt 칼리브리';
context.shadowColor = "흰색";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 20;
context.fillText("흐리게 캔버스", 40, 80);
context.StrokeStyle = "RGBA(0, 255, 0, 1)";
context.lineWidth = 2;
context.StrokeText("흐리게 캔버스", 40, 80);
// 섹션 2 - 그림자 글꼴
var hh = canvas.height/4;
context.fillStyle="흰색";
context.fillRect(0, hh, canvas.width, canvas.height/4);
context.font = '60pt 칼리브리';
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("흐리게 캔버스", 40, 80 hh);
// 섹션 3 - 그림자 효과
var hh = canvas.height/4 hh;
context.fillStyle="검은색";
context.fillRect(0, hh, canvas.width, canvas.height/4);
for(var i = 0; 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("흐리게 캔버스", 40, 80 hh);
}
// 섹션 4 - 페이드 효과
var hh = canvas.height/4 hh;
context.fillStyle="녹색";
context.fillRect(0, hh, canvas.width, canvas.height/4);
for(var i = 0; 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("흐리게 캔버스", 40, 80 hh);
}
for(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("흐리게 캔버스", 40, 80 hh);
}
for(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("흐리게 캔버스", 40, 80 hh);
}
for(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("흐리게 캔버스", 40, 80 hh);
}
}


<본문>

HTML5 캔버스 클립 데모 - 작성자: Gloomy Fish

채우기 및 획 클립