Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Vẽ bóng (shadow) với HTML5 Canvas


Để vẽ bóng với HTML5 Canvas:

<!DOCTYPE HTML> <html>    <head>       <style>          #test {             width: 100px;             height:100px;             margin: 0px auto;          }       </style>                     <script>          function drawShape(){             // lấy canvas bằng DOM             var canvas = document.getElementById('mycanvas');             // Đảm bảo không thực thi khi canvas không hỗ trợ             if (canvas.getContext){                // dùng getContext để vẽ                var ctx = canvas.getContext('2d');                ctx.shadowOffsetX = 2;                ctx.shadowOffsetY = 2;                ctx.shadowBlur = 2;                ctx.shadowColor = "rgba(0, 0, 0, 0.5)";                ctx.font = "20px Times New Roman";                ctx.fillStyle = "Black";                ctx.fillText("This is shadow test", 5, 30);             } else {                alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');             }          }       </script>    </head>    <body id = "test" onload = "drawShape();">       <canvas id = "mycanvas"></canvas>    </body> </html>