이 글에서는 텍스트에 흐린 그림자 효과를 추가하는 Canvas Shadow API를 소개합니다. 캔버스 그림자 효과 응용 프로그램은 이전에도 소개되었지만 여기서는 주로 텍스트에 그림자 효과를 소개합니다.
그림자효과 사용시에는 '정도'도 파악하셔야 합니다.
<!DOCTYPE html> <html> <meta charset="UTF-8"> <title>文本阴影示例</title> <canvas id="trails" style="border: 1px solid;" width="400" height="300"> </canvas> <script> drawTrails(); function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); context.save(); context.font = "60px impact"; context.fillStyle = '#996600' context.textAlign = 'center'; // 设置文字阴影的颜色为黑色,透明度为20% context.shadowColor = 'rgba(0, 0, 0, 0.2)'; // 将阴影向右移动15px, 向上移动10px context.shadowOffsetX = 15; context.shadowOffsetY = -10; // 轻微模糊阴影 context.shadowBlur = 2; context.fillText('Happy Trails!', 200, 60, 400); context.restore(); } </script> </html>
생성된 그림자(나무그림자)
를 변형하여 동기화를 유지하는 방법과 비교해 보세요. 일관성을 위해 캔버스에 그림자를 그릴 때에는 한 가지 방법만 사용하도록 노력해야 합니다
위 내용은 HTML5 9__Canvas의 Shadow API 내용입니다. PHP 중국어 웹사이트(www.php.cn)에 주목하세요!