Bóng Canvas HTML
Bóng Canvas HTML
Để tạo bóng trong canvas, chúng ta sử dụng bốn thuộc tính sau:
-
shadowColor
- xác định màu của bóng -
shadowBlur
- xác định mức độ mờ của bóng -
shadowOffsetX
- xác định khoảng cách mà bóng sẽ được bù theo chiều ngang -
shadowOffsetY
- xác định khoảng cách mà bóng sẽ được bù theo chiều dọc
Thuộc tính ShadowColor
Thuộc tính shadowColor
xác định màu của bóng.
Giá trị mặc định là màu đen trong suốt hoàn toàn.
Ví dụ
Ở đây, chúng ta tạo một hình chữ nhật màu xanh lam với bóng màu xanh nhạt và một hình chữ nhật màu xanh có nét vẽ với bóng màu xanh nhạt:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY
= 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20,
20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
Hãy tự mình thử »Ví dụ
Ở đây, chúng ta tạo một văn bản màu tím có bóng màu xanh nhạt và một văn bản màu tím có nét với bóng màu xanh nhạt:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY
= 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle =
"purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
Hãy tự mình thử » Thuộc tính ShadowBlur
Thuộc tính shadowBlur
xác định mức độ mờ được áp dụng cho bóng.
Giá trị mặc định là 0 (không mờ).
Ví dụ
Các hình chữ nhật được tô và vuốt với thuộc tính shadowBlur
được đặt thành 8:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY
= 10;
// Filled rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20,
20, 100, 100);
// Stroked rectangle
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.strokeRect(170, 20, 100, 100);
</script>
Hãy tự mình thử »Ví dụ
Văn bản được tô và vuốt bằng thuộc tính shadowBlur
được đặt thành 4:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "lightblue";
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY
= 5;
ctx.font = "50px Arial";
// Filled text
ctx.fillStyle =
"purple";
ctx.fillText("Hello World",10,60);
// Stroked text
ctx.strokeStyle = "purple";
ctx.strokeText("Hello World",10,120);
</script>
Hãy tự mình thử »Thuộc tính ShadowOffsetX
Thuộc tính shadowOffsetX
xác định khoảng cách theo chiều ngang của bóng từ hình dạng.
Giá trị dương di chuyển bóng sang phải và giá trị âm di chuyển bóng sang trái.
Giá trị mặc định là 0 (không có khoảng cách bù ngang).
Ví dụ
Hình chữ nhật đầu tiên có shadowOffsetX = 5
, hình chữ nhật thứ hai có shadowOffsetX = 15
, hình chữ nhật thứ ba có shadowOffsetX = -10
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
//
rectangle 1
ctx.shadowOffsetX = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetX = 15;
ctx.fillRect(170, 20, 100,
100);
// rectangle 3
ctx.shadowOffsetX = -10;
ctx.fillRect(320,
20, 100, 100);
</script>
Hãy tự mình thử »Thuộc tính ShadowOffsetY
Thuộc tính shadowOffsetY
xác định khoảng cách theo chiều dọc của bóng từ hình dạng.
Các giá trị dương sẽ di chuyển bóng xuống và các giá trị âm sẽ di chuyển bóng lên trên.
Giá trị mặc định là 0 (không có khoảng cách offset dọc).
Ví dụ
Hình chữ nhật đầu tiên có shadowOffsetY = 5
, hình chữ nhật thứ hai có shadowOffsetY = 15
, hình chữ nhật thứ ba có shadowOffsetY = -10
:
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Shadowcolor
ctx.shadowColor = "lightblue";
ctx.fillStyle = "blue";
//
rectangle 1
ctx.shadowOffsetY = 5;
ctx.fillRect(20, 20, 100, 100);
// rectangle 2
ctx.shadowOffsetY = 15;
ctx.fillRect(170, 20, 100,
100);
// rectangle 3
ctx.shadowOffsetY = -10;
ctx.fillRect(320,
20, 100, 100);
</script>
Hãy tự mình thử »