HTML5 canvas cung cấp khả năng tạo bóng đẹp xung quanh các bản vẽ. Tất cả các hoạt động vẽ đều bị ảnh hưởng bởi bốn thuộc tính bóng tổng thể.
| Sr.No. | Thuộc tính và Mô tả |
|---|---|
| 1 | shadowColor [=value] Thuộc tính này trả về màu bóng hiện tại và có thể được thiết lập để thay đổi màu bóng. |
| 2 | shadowOffsetX [=value] Thuộc tính này trả về độ lệch bóng X hiện tại và có thể được đặt để thay đổi độ lệch bóng X. |
| 3 | shadowOffsetY [=value] Thuộc tính này trả về độ lệch bóng Y hiện tại và có thể được thiết lập, thay đổi độ lệch bóng Y. |
| 4 | shadowBlur [=value] Thuộc tính này trả về mức độ mờ hiện tại được áp dụng cho bóng và có thể được đặt để thay đổi mức độ mờ. |
Ví dụ
Bạn có thể thử chạy đoạn mã sau để tạo bóng:
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
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('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>