Thuộc tính Canvas shadowOffsetY

Tài liệu tham khảo Canvas

Định nghĩa và cách sử dụng

shadowOffsetY thuộc tính thiết lập hoặc trả về khoảng cách thẳng đứng giữa hình dạng và bóng.

  • shadowOffsetY=0 Chỉ ra rằng bóng nằm ngay dưới hình dạng.
  • shadowOffsetY=20 Chỉ ra rằng bóng nằm dưới vị trí top của hình dạng 20 pixel.
  • shadowOffsetY=-20 Chỉ ra rằng bóng nằm trên vị trí top của hình dạng 20 pixel.

lưu ý:Nếu muốn điều chỉnh khoảng cách từ hình dạng theo hướng ngang, hãy sử dụng shadowOffsetX thuộc tính.

thực hành

Vẽ một hình vuông có bóng chụm xuống 20 pixel (từ vị trí top của hình vuông):

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);

thử trực tiếp

cú pháp

context.shadowOffsetY=số;

giá trị thuộc tính

giá trị miêu tả
số Chính giá trị hoặc giá trị âm, định nghĩa khoảng cách thẳng đứng giữa bóng và hình dạng.

Chi tiết kỹ thuật

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

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.

Tài liệu tham khảo Canvas