shadowOffsetX trong Canvas

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < ! DOCTYPE html > < html > < body > < canvas ...

Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.

Code:

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.shadowBlur = 10;

ctx.shadowOffsetX = 20;

ctx.shadowColor = "black";

ctx.fillStyle= "red";

ctx.fillRect(20, 20, 100, 80);

</script>

</body>

</html>

Demo

Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.

Thuộc tính
shadowOffsetX	4.0	2.0	9.0	3.1	9.0

Thuộc tính shadowOffsetX dùng để thiết lập hoặc trả về khoảng cách chiều ngang từ bóng đến hình.

shadowOffsetX=0 : Bóng ngay phía sau hình.

shadowOffsetX=20 : Bóng bên phải hình 20 pixels.

shadowOffsetX=-20 : Bóng bên trái hình 20 pixels.

Mẹo: Để chỉnh khoảng cách chiều dọc từ bóng đến hình, sử dụng thuộc tính shadowOffsetY.

Giá trị mặc định: 0

Cú pháp JavaScript: context.shadowOffsetX=number;

Giá trị	Miêu tả
number	Một số dương hoặc âm quy định khoảng cách ngang từ bóng đến hình

Bình luận về bài viết này

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết