Html5 캔버스 예비 연구 노트(8) -그림자

이 글에서는 계속해서 html5의 일부 상태 값을 소개합니다. html5의 그리기 컨텍스트는 다양한 효과를 제공합니다. 그림자 효과, 그림자에는 shadowBlur, shadowOffsetX, shadowOffsetY 및 shadowColor. 여기서 shadowBlur는 그림자의 픽셀 흐림 값, shadowOffsetX 및 shadowOffsetY입니다. 그림자는 x 축과 y 축의 오프셋 값, shadowColor은 Shadow 색상값으로, 기본값은 처음 3개 값이 모두 0이고, 마지막 값은 투명 검정색으로 설정되어 있습니다. 아래 예와 같이 ​​​​값 중 2개만 수정하면 그림자 효과가 나타납니다. 동시에 아래 예에서도 를 사용할 수도 있습니다. 저장저장하고 복원팝니다.

그리기 코드는 다음과 같습니다

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

여기에서는 그림자 색상만 설정합니다. red로,

x

와 y의 오프셋 값이 설정되지 않았기 때문에 기본값은 이 그림자 주변 상태, shadowColor 는 완전 불투명 빨간색으로 설정됩니다. argb 값을 통해 투명도를 설정할 수도 있지만 해당 그림자에는 큰 차이가 없습니다. 다음 코드를 수정하면 효과는 다음과 같습니다.

그림 코드는 다음과 같습니다:

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.shadowColor = "argb(255,0,0,0.5)";
context.fillRect(200,50,100,100);

x

축과 y 축의 그림자 오프셋 값입니다. 이름에서 알 수 있듯이 x 축에서 그림자를 오프셋하고 y 축에서 해당 거리를 오프셋하는 것입니다. 효과는 다음과 같습니다:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(50,50,100,100);

그림자는 사각형뿐만 아니라 다른 모양에도 적합합니다.

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.beginPath();//开始路径
context.arc(100,100,60,Math.PI / 6,Math.PI,true);
context.closePath();
context.fill();//填充
context.beginPath();//开始路径
context.moveTo(200,50);//设置路径，参数为原点
context.lineTo(360,50);//设置路径直到本线段的终点
context.lineTo(360,150);//设置路径直到本线段的终点
context.closePath();//结束路径
context.fill();//正式绘制

위 내용은 Html5 Canvas 예비 학습 노트(8) - Shadow 내용입니다. PHP 중국어 홈페이지(www.php.cn)!