Con trăn getcontext()
Trong chương về vẽ hình, chúng ta chỉ sử dụng các kiểu tô và đường mặc định. Ở đây chúng ta sẽ khám phá các tùy chọn canvas mà chúng ta có để làm cho bản vẽ của chúng ta hấp dẫn hơn một chút. Bạn sẽ học cách thêm các màu khác nhau, kiểu đường kẻ, độ dốc, hoa văn và bóng đổ vào bản vẽ của mình Show
Ghi chú. Trình đọc màn hình không thể truy cập nội dung canvas. Nếu canvas hoàn toàn là trang trí, hãy bao gồm 9 trên thẻ mở đầu 0. Nếu không, hãy bao gồm văn bản mô tả dưới dạng giá trị của thuộc tính 1 trực tiếp trên chính thành phần canvas hoặc bao gồm nội dung dự phòng được đặt trong thẻ canvas mở và đóng. Nội dung canvas không phải là một phần của DOM, nhưng nội dung dự phòng lồng nhau làMàu sắcCho đến bây giờ chúng ta mới chỉ thấy các phương pháp của ngữ cảnh vẽ. Nếu chúng ta muốn áp dụng màu sắc cho một hình dạng, có hai thuộc tính quan trọng mà chúng ta có thể sử dụng. 2 và 3 4Đặt kiểu được sử dụng khi tô hình 5Đặt kiểu cho các đường viền của hình dạng 6 là một chuỗi đại diện cho CSS 7, đối tượng gradient hoặc đối tượng mẫu. Chúng ta sẽ xem xét các đối tượng gradient và pattern sau. Theo mặc định, màu nét và màu tô được đặt thành màu đen (giá trị màu CSS 8)Ghi chú. Khi bạn đặt thuộc tính 3 và/hoặc 2, giá trị mới sẽ trở thành giá trị mặc định cho tất cả các hình dạng được vẽ từ đó trở đi. Đối với mỗi hình dạng bạn muốn có màu khác nhau, bạn sẽ cần chỉ định lại thuộc tính 2 hoặc 3Theo thông số kỹ thuật, các chuỗi hợp lệ bạn có thể nhập phải là giá trị CSS 7. Mỗi ví dụ sau mô tả cùng một màu 5Một ví dụ về 2Trong ví dụ này, một lần nữa chúng ta sử dụng hai vòng lặp 75 để vẽ một lưới các hình chữ nhật, mỗi hình có một màu khác nhau. Hình ảnh kết quả sẽ trông giống như ảnh chụp màn hình. Không có gì quá ngoạn mục xảy ra ở đây. Chúng tôi sử dụng hai biến 76 và 77 để tạo màu RGB duy nhất cho mỗi hình vuông và chỉ sửa đổi các giá trị màu đỏ và xanh lục. Kênh màu xanh có giá trị cố định. Bằng cách sửa đổi các kênh, bạn có thể tạo tất cả các loại bảng màu. Bằng cách tăng các bước, bạn có thể đạt được thứ gì đó trông giống như bảng màu mà Photoshop sử dụng 0 1 7Kết quả trông như thế này Ảnh chụp màn hìnhMẫu trực tiếpMột ví dụ về 3Ví dụ này tương tự như ví dụ trên, nhưng sử dụng thuộc tính 3 để thay đổi màu sắc của đường viền của hình dạng. Chúng tôi sử dụng phương pháp 50 để vẽ hình tròn thay vì hình vuông
7Kết quả trông như thế này Ảnh chụp màn hìnhMẫu trực tiếpminh bạchNgoài việc vẽ các hình mờ lên khung vẽ, chúng ta cũng có thể vẽ các hình bán trong suốt (hoặc trong mờ). Điều này được thực hiện bằng cách đặt thuộc tính 51 hoặc bằng cách gán màu bán trong suốt cho nét và/hoặc kiểu tô 52Áp dụng giá trị độ trong suốt đã chỉ định cho tất cả các hình dạng trong tương lai được vẽ trên canvas. Giá trị phải nằm trong khoảng từ 0. 0 (hoàn toàn trong suốt) đến 1. 0 (đục hoàn toàn). Giá trị này là 1. 0 (hoàn toàn mờ đục) theo mặc định Thuộc tính 51 có thể hữu ích nếu bạn muốn vẽ nhiều hình dạng trên canvas với độ trong suốt tương tự, nhưng nếu không thì sẽ hữu ích hơn khi đặt độ trong suốt cho các hình dạng riêng lẻ khi đặt màu của chúngVì các thuộc tính 3 và 2 chấp nhận các giá trị màu CSS rgba nên chúng ta có thể sử dụng ký hiệu sau để gán màu trong suốt cho chúng 5Hàm 56 tương tự như hàm 57 nhưng nó có thêm một tham số. Tham số cuối cùng đặt giá trị độ trong suốt của màu cụ thể này. Phạm vi hợp lệ lại nằm trong khoảng từ 0. 0 (hoàn toàn trong suốt) và 1. 0 (đục hoàn toàn)Một ví dụ về 51Trong ví dụ này, chúng ta sẽ vẽ nền gồm bốn hình vuông có màu khác nhau. Trên hết, chúng ta sẽ vẽ một tập hợp các vòng tròn bán trong suốt. Thuộc tính 51 được đặt tại 90 sẽ được sử dụng cho tất cả các hình dạng từ thời điểm đó trở đi. Mỗi bước trong vòng lặp 75 vẽ một tập hợp các vòng tròn có bán kính tăng dần. Kết quả cuối cùng là một gradient xuyên tâm. Bằng cách chồng thêm nhiều vòng tròn lên nhau, chúng tôi giảm độ trong suốt của các vòng tròn đã được vẽ một cách hiệu quả. Bằng cách tăng số bước và thực tế là vẽ nhiều vòng tròn hơn, nền sẽ biến mất hoàn toàn khỏi trung tâm của hình ảnh 9
7Ảnh chụp màn hìnhMẫu trực tiếpMột ví dụ sử dụng 56Trong ví dụ thứ hai này, chúng ta làm tương tự như ở trên, nhưng thay vì vẽ các hình tròn chồng lên nhau, tôi đã vẽ các hình chữ nhật nhỏ với độ mờ tăng dần. Sử dụng 56 cho phép bạn kiểm soát và linh hoạt hơn một chút vì chúng tôi có thể đặt kiểu tô và nét riêng lẻ 01
7Ảnh chụp màn hìnhMẫu trực tiếpKiểu đường kẻCó một số thuộc tính cho phép chúng ta tạo kiểu cho các dòng 94Đặt độ rộng của các đường được vẽ trong tương lai 95Đặt sự xuất hiện của các kết thúc của dòng 96Đặt hình thức của "các góc" nơi các đường giao nhau 97Thiết lập giới hạn trên vát khi hai đường giao nhau ở một góc nhọn, để cho phép bạn kiểm soát độ dày của đường giao nhau 98Trả về mảng mẫu gạch ngang dòng hiện tại chứa một số chẵn các số không âm 99Đặt mẫu gạch ngang dòng hiện tại 0Chỉ định nơi bắt đầu một mảng gạch ngang trên một dòng Bạn sẽ hiểu rõ hơn về những gì chúng làm bằng cách xem các ví dụ bên dưới Một ví dụ về 1Thuộc tính này đặt độ dày của dòng hiện tại. Giá trị phải là số dương. Theo mặc định, giá trị này được đặt thành 1. 0 đơn vị Chiều rộng của đường là độ dày của nét có tâm trên đường dẫn đã cho. Nói cách khác, khu vực được vẽ mở rộng bằng một nửa chiều rộng của đường ở hai bên của đường dẫn. Vì các tọa độ canvas không tham chiếu trực tiếp các pixel, nên phải đặc biệt cẩn thận để có được các đường ngang và dọc sắc nét Trong ví dụ bên dưới, 10 đường thẳng được vẽ với độ rộng đường tăng dần. Dòng ngoài cùng bên trái là 1. rộng 0 đơn vị. Tuy nhiên, ngoài cùng bên trái và tất cả các đường có độ dày bằng số nguyên lẻ khác không xuất hiện sắc nét do vị trí của đường dẫn 04
7Mẫu ảnh chụp màn hình trực tiếpĐể có được các đường rõ nét, bạn cần phải hiểu cách các đường nét được vẽ. Trong các hình ảnh bên dưới, lưới biểu thị lưới tọa độ canvas. Các ô vuông giữa các đường lưới là các pixel thực tế trên màn hình. Trong hình lưới đầu tiên bên dưới, một hình chữ nhật từ (2,1) đến (5,5) được lấp đầy. Toàn bộ khu vực giữa chúng (màu đỏ nhạt) nằm trên các ranh giới pixel, do đó, hình chữ nhật được lấp đầy thu được sẽ có các cạnh sắc nét. Nếu bạn xem xét một đường dẫn từ (3,1) đến (3,5) với độ dày của đường là 2, bạn sẽ có tình huống trong hình ảnh thứ hai. Khu vực thực tế được lấp đầy (màu xanh đậm) chỉ kéo dài một nửa thành các pixel ở hai bên của đường dẫn. Một giá trị gần đúng của điều này phải được hiển thị, có nghĩa là những pixel đó chỉ được tô bóng một phần và dẫn đến toàn bộ khu vực (màu xanh lam nhạt và xanh lam đậm) được tô bằng màu chỉ tối bằng một nửa so với màu nét vẽ thực tế. Đây là những gì xảy ra với đường có chiều rộng 2 trong mã ví dụ trướcĐể khắc phục điều này, bạn phải rất chính xác trong việc tạo đường dẫn của mình. Biết rằng một đường có chiều rộng 2 sẽ kéo dài nửa đơn vị sang hai bên của đường đi, tạo ra đường đi từ (3. 5,1) đến (3. 5,5) dẫn đến tình huống trong ảnh thứ ba—chiều rộng của dòng 2 kết thúc hoàn toàn và chính xác khi lấp đầy một đường dọc pixel đơn lẻGhi chú. Xin lưu ý rằng trong ví dụ về đường thẳng đứng của chúng ta, vị trí Y vẫn tham chiếu đến một vị trí đường lưới số nguyên—nếu không, chúng ta sẽ thấy các pixel có độ bao phủ một nửa ở các điểm cuối (nhưng cũng lưu ý rằng hành vi này phụ thuộc vào kiểu 6 hiện tại có kiểu mặc định Cũng lưu ý rằng chỉ điểm đầu và điểm cuối của đường dẫn mới bị ảnh hưởng. nếu một đường dẫn bị đóng với 000, thì không có điểm đầu và điểm cuối; . Xem hai phần tiếp theo để trình diễn các kiểu đường bổ sung nàyĐối với các đường có chiều rộng bằng nhau, mỗi nửa kết thúc bằng một lượng pixel nguyên, vì vậy bạn muốn có một đường dẫn nằm giữa các pixel (nghĩa là (3,1) đến (3,5)), thay vì đi xuống giữa các pixel Mặc dù hơi đau khi lần đầu làm việc với đồ họa 2D có thể mở rộng, nhưng chú ý đến lưới pixel và vị trí của các đường dẫn đảm bảo rằng bản vẽ của bạn sẽ trông chính xác bất kể tỷ lệ hoặc bất kỳ biến đổi nào khác có liên quan. một 1. Đường thẳng đứng có chiều rộng bằng 0 được vẽ ở đúng vị trí sẽ trở thành một đường 2 pixel sắc nét khi được tăng tỷ lệ lên 2 và sẽ xuất hiện ở đúng vị trí Một ví dụ về 6Thuộc tính 6 xác định cách vẽ các điểm cuối của mỗi dòng. Có ba giá trị có thể có cho thuộc tính này và đó là. 7, 006 và 9. Theo mặc định, thuộc tính này được đặt thành 7 7Các đầu của dòng được bình phương tại các điểm cuối 006Các đầu của dòng được làm tròn 9Các đầu của dòng được bình phương bằng cách thêm một hộp có chiều rộng bằng một nửa chiều cao của độ dày của dòng Trong ví dụ này, chúng ta sẽ vẽ ba dòng, mỗi dòng có một giá trị khác nhau cho thuộc tính 6. Tôi cũng đã thêm hai hướng dẫn để xem sự khác biệt chính xác giữa ba. Mỗi dòng này bắt đầu và kết thúc chính xác trên các hướng dẫn nàyDòng bên trái sử dụng tùy chọn 7 mặc định. Bạn sẽ nhận thấy rằng nó được vẽ hoàn toàn phẳng với các hướng dẫn. Cái thứ hai được đặt để sử dụng tùy chọn 006. Điều này thêm một hình bán nguyệt vào cuối có bán kính bằng một nửa chiều rộng của đường. Dòng bên phải sử dụng tùy chọn 9. Điều này thêm một hộp có chiều rộng bằng và một nửa chiều cao của độ dày đường 07
7Ảnh chụp màn hìnhMẫu trực tiếpMột ví dụ về 001Thuộc tính 001 xác định cách nối hai đoạn kết nối (của đường, cung hoặc đường cong) có độ dài khác 0 trong một hình (các đoạn suy biến có độ dài bằng 0, có điểm cuối và điểm kiểm soát được chỉ định chính xác ở cùng một vị trí, bị bỏ qua)Có ba giá trị có thể có cho thuộc tính này. 006, 019 và 002. Theo mặc định, thuộc tính này được đặt thành 002. Lưu ý rằng cài đặt 001 không có hiệu lực nếu hai đoạn được kết nối có cùng hướng, vì sẽ không có vùng nối nào được thêm vào trong trường hợp này 006Làm tròn các góc của hình bằng cách lấp đầy một cung đĩa bổ sung có tâm ở điểm cuối chung của các đoạn được kết nối. Bán kính cho các góc tròn này bằng một nửa chiều rộng của đường 019Lấp đầy một khu vực hình tam giác bổ sung giữa điểm cuối chung của các đoạn được kết nối và các góc hình chữ nhật bên ngoài riêng biệt của từng đoạn 002Các phân đoạn được kết nối được nối bằng cách mở rộng các cạnh bên ngoài của chúng để kết nối tại một điểm duy nhất, với tác dụng lấp đầy một khu vực hình thoi bổ sung. Cài đặt này được thực hiện bởi thuộc tính 026 được giải thích bên dướiVí dụ bên dưới vẽ ba đường dẫn khác nhau, thể hiện từng đường dẫn trong ba cài đặt thuộc tính 001 này; 10
7Ảnh chụp màn hìnhMẫu trực tiếpBản demo của tài sản 026Như bạn đã thấy trong ví dụ trước, khi nối hai đường với tùy chọn 002, các cạnh bên ngoài của hai đường nối được kéo dài đến điểm mà chúng gặp nhau. Đối với các đường tạo góc lớn với nhau thì điểm này cách điểm nối bên trong không xa. Tuy nhiên, khi các góc giữa mỗi đường giảm, khoảng cách (độ dài vát) giữa các điểm này tăng theo cấp số nhânThuộc tính 026 xác định điểm kết nối bên ngoài có thể được đặt cách điểm kết nối bên trong bao xa. Nếu hai dòng vượt quá giá trị này, thay vào đó, một đường nối vát sẽ được vẽ. Lưu ý rằng chiều dài vát tối đa là tích của chiều rộng đường được đo trong hệ tọa độ hiện tại, bằng giá trị của thuộc tính 026 này (có giá trị mặc định là 10. 0 trong HTML 0), do đó, 026 có thể được đặt độc lập với tỷ lệ hiển thị hiện tại hoặc bất kỳ biến đổi affine nào của đường dẫn. nó chỉ ảnh hưởng đến hình dạng được hiển thị hiệu quả của các cạnh đườngChính xác hơn, giới hạn vát là tỷ lệ tối đa cho phép của độ dài phần mở rộng (trong khung vẽ HTML, nó được đo giữa góc bên ngoài của các cạnh được nối của đường và điểm cuối chung của các đoạn nối được chỉ định trong đường dẫn) với một nửa . Nó có thể được định nghĩa tương đương là tỷ lệ tối đa cho phép của khoảng cách giữa các điểm bên trong và bên ngoài của đường giao nhau của các cạnh, trên tổng chiều rộng của đường. Sau đó, nó bằng với cosec của một nửa góc trong tối thiểu của các đoạn kết nối bên dưới mà không có đường nối vát nào được hiển thị mà chỉ có đường nối vát
Đây là một bản trình diễn nhỏ mà bạn có thể thiết lập động 026 và xem điều này ảnh hưởng như thế nào đến các hình dạng trên khung vẽ. Các đường màu xanh lam cho biết điểm bắt đầu và điểm cuối của mỗi đường trong mẫu hình zig-zagNếu bạn chỉ định giá trị 026 dưới 4. 2 trong bản trình diễn này, không có góc nào có thể nhìn thấy được nối với phần mở rộng vát mà chỉ có một góc xiên nhỏ gần các đường màu xanh lam; 13 14 15Ảnh chụp màn hìnhMẫu trực tiếpSử dụng dấu gạch ngangPhương thức 040 và thuộc tính 041 chỉ định mẫu dấu gạch ngang cho các dòng. Phương thức 040 chấp nhận một danh sách các số chỉ định khoảng cách để vẽ xen kẽ một đường và một khoảng cách và thuộc tính 041 đặt một khoảng cách để bắt đầu mẫuTrong ví dụ này, chúng ta đang tạo hiệu ứng kiến diễu hành. Đây là một kỹ thuật hoạt hình thường được tìm thấy trong các công cụ lựa chọn của các chương trình đồ họa máy tính. Nó giúp người dùng phân biệt đường viền lựa chọn với nền ảnh bằng cách tạo hiệu ứng động cho đường viền. Trong phần sau của hướng dẫn này, bạn có thể tìm hiểu cách thực hiện điều này và các hoạt ảnh cơ bản khác 16 17Ảnh chụp màn hìnhMẫu trực tiếpĐộ dốcGiống như bất kỳ chương trình vẽ thông thường nào, chúng ta có thể tô và vẽ các hình dạng bằng cách sử dụng các gradient tuyến tính, xuyên tâm và hình nón. Chúng tôi tạo một đối tượng 044 bằng cách sử dụng một trong các phương pháp sau. Sau đó, chúng ta có thể gán đối tượng này cho các thuộc tính 2 hoặc 3 047Tạo một đối tượng gradient tuyến tính với điểm bắt đầu là ( 048, 049) và điểm kết thúc là ( 050, 051) 052Tạo một gradient xuyên tâm. Các tham số đại diện cho hai đường tròn, một đường tròn có tâm tại ( 048, 049) và bán kính 055, và đường tròn còn lại có tâm tại ( 050, 051) với bán kính 058 059Tạo một đối tượng gradient hình nón với góc bắt đầu là 060 tính bằng radian, tại vị trí ( 061, 062)Ví dụ 18Khi chúng tôi đã tạo một đối tượng 044, chúng tôi có thể gán màu cho nó bằng cách sử dụng phương pháp 064 065Tạo một điểm dừng màu mới trên đối tượng 066. 067 là một số nằm trong khoảng từ 0. 0 và 1. 0 và xác định vị trí tương đối của màu trong dải màu và đối số 6 phải là một chuỗi đại diện cho CSS 7, cho biết màu mà dải màu sẽ đạt được ở phần bù đó vào quá trình chuyển đổiBạn có thể thêm bao nhiêu điểm dừng màu vào một dải màu tùy thích. Dưới đây là một gradient tuyến tính rất đơn giản từ trắng sang đen 19Một ví dụ về 070Trong ví dụ này, chúng ta sẽ tạo hai gradient khác nhau. Như bạn có thể thấy ở đây, cả hai thuộc tính 3 và 2 đều có thể chấp nhận đối tượng 073 làm đầu vào hợp lệ 70
7Đầu tiên là một gradient nền. Như bạn có thể thấy, chúng tôi đã chỉ định hai màu ở cùng một vị trí. Bạn làm điều này để tạo ra sự chuyển đổi màu rất sắc nét—trong trường hợp này là từ trắng sang xanh lục. Thông thường, thứ tự bạn xác định các điểm dừng màu không quan trọng, nhưng trong trường hợp đặc biệt này, nó ảnh hưởng đáng kể. Nếu bạn sắp xếp các bài tập theo thứ tự mà bạn muốn chúng xuất hiện, điều này sẽ không thành vấn đề Trong gradient thứ hai, chúng tôi không chỉ định màu bắt đầu (ở vị trí 0. 0) vì nó không thực sự cần thiết, bởi vì nó sẽ tự động lấy màu của điểm dừng màu tiếp theo. Do đó, gán màu đen ở vị trí 0. 5 tự động tạo độ dốc, từ điểm bắt đầu đến điểm dừng này, màu đen Ảnh chụp màn hìnhMẫu trực tiếpMột ví dụ về 074Trong ví dụ này, chúng tôi sẽ xác định bốn độ dốc xuyên tâm khác nhau. Bởi vì chúng ta có quyền kiểm soát điểm bắt đầu và điểm kết thúc của dải màu, nên chúng ta có thể đạt được các hiệu ứng phức tạp hơn so với những gì chúng ta thường có trong các dải màu xuyên tâm "cổ điển" mà chúng ta thấy trong Photoshop (nghĩa là một dải màu có một tâm duy nhất). 73
7Trong trường hợp này, chúng tôi đã dịch chuyển điểm bắt đầu một chút so với điểm kết thúc để đạt được hiệu ứng 3D hình cầu. Tốt nhất là cố gắng tránh để các vòng tròn bên trong và bên ngoài chồng lên nhau vì điều này dẫn đến những hiệu ứng kỳ lạ, khó dự đoán. Điểm dừng màu cuối cùng trong mỗi trong số bốn dải màu sử dụng màu hoàn toàn trong suốt. Nếu bạn muốn có sự chuyển đổi đẹp mắt từ điểm dừng màu này sang điểm dừng màu trước đó, cả hai màu phải bằng nhau. Điều này không rõ ràng lắm từ mã vì nó sử dụng hai phương thức màu CSS khác nhau để minh họa, nhưng ở dải màu đầu tiên 075Ảnh chụp màn hìnhMẫu trực tiếpMột ví dụ về 076Trong ví dụ này, chúng tôi sẽ xác định hai độ dốc hình nón khác nhau. Một gradient hình nón khác với một gradient xuyên tâm, thay vì tạo ra các vòng tròn, nó sẽ xoay quanh một điểm 76 77 7Dải màu đầu tiên được định vị ở giữa hình chữ nhật đầu tiên và di chuyển điểm dừng màu xanh lá cây ở đầu, sang màu trắng ở cuối. Góc bắt đầu từ 2 radian, đáng chú ý vì đường bắt đầu/kết thúc hướng về phía đông nam Độ dốc thứ hai cũng được định vị ở tâm của hình chữ nhật thứ hai. Cái này có nhiều điểm dừng màu, xen kẽ từ đen sang trắng ở mỗi phần tư vòng quay. Điều này mang lại cho chúng ta hiệu ứng rô Ảnh chụp màn hìnhMẫu trực tiếphoa vănTrong một trong những ví dụ ở trang trước, chúng tôi đã sử dụng một loạt vòng lặp để tạo mẫu hình ảnh. Tuy nhiên, có một phương pháp đơn giản hơn nhiều. phương pháp 077 078Tạo và trả về một đối tượng mẫu canvas mới. 079 là nguồn của hình ảnh (tức là, một 080, một 081, một 082 hoặc một 083 khác, một 084 hoặc một 085 hoặc một 086). 087 là một chuỗi cho biết cách sử dụng hình ảnhLoại chỉ định cách sử dụng hình ảnh để tạo mẫu và phải là một trong các giá trị chuỗi sau 088Xếp hình ảnh theo cả hai hướng dọc và ngang 089Xếp hình ảnh theo chiều ngang nhưng không theo chiều dọc 090Xếp hình ảnh theo chiều dọc nhưng không theo chiều ngang 091Không xếp hình ảnh. Nó chỉ được sử dụng một lần Chúng ta sử dụng phương thức này để tạo một đối tượng 092 rất giống với các phương thức gradient mà chúng ta đã thấy ở trên. Khi chúng tôi đã tạo một mẫu, chúng tôi có thể gán nó cho các thuộc tính 2 hoặc 3. Ví dụ 79Ghi chú. Giống như phương thức 095, bạn phải đảm bảo rằng hình ảnh bạn sử dụng đã được tải trước khi gọi phương thức này, nếu không mẫu có thể được vẽ không chính xácMột ví dụ về 096Trong ví dụ cuối cùng này, chúng ta sẽ tạo một mẫu để gán cho thuộc tính 2. Điều đáng chú ý duy nhất là việc sử dụng trình xử lý 098 của hình ảnh. Điều này là để đảm bảo hình ảnh được tải trước khi được gán cho mẫu 0
7Ảnh chụp màn hìnhMẫu trực tiếpbóng tốiSử dụng bóng chỉ liên quan đến bốn thuộc tính 099Cho biết khoảng cách theo chiều ngang mà bóng sẽ kéo dài từ đối tượng. Giá trị này không bị ảnh hưởng bởi ma trận chuyển đổi. Mặc định là 0 100Cho biết khoảng cách thẳng đứng mà bóng sẽ kéo dài từ đối tượng. Giá trị này không bị ảnh hưởng bởi ma trận chuyển đổi. Mặc định là 0 101Cho biết kích thước của hiệu ứng làm mờ; . Giá trị mặc định là 0 102Giá trị màu CSS tiêu chuẩn cho biết màu của hiệu ứng đổ bóng; Các thuộc tính 103 và 104 cho biết bóng sẽ kéo dài bao xa từ đối tượng theo hướng X và Y; . Sử dụng các giá trị âm để làm cho bóng mở rộng lên hoặc sang trái và các giá trị dương để làm cho bóng kéo dài xuống hoặc sang phải. Cả hai đều là 0 theo mặc địnhThuộc tính 105 cho biết kích thước của hiệu ứng làm mờ; . Giá trị mặc định là 0Thuộc tính 106 là một giá trị màu CSS tiêu chuẩn cho biết màu của hiệu ứng đổ bóng; Ghi chú. Bóng chỉ được vẽ cho các hoạt động tổng hợp 107Một ví dụ về văn bản bóng tốiVí dụ này vẽ một chuỗi văn bản có hiệu ứng đổ bóng 3 4 7Mẫu ScreenshotLiveChúng ta sẽ xem xét thuộc tính 108 và phương thức 109 trong chương tiếp theo về vẽ văn bản. Quy tắc điền canvasKhi sử dụng 110 (hoặc 111 và 112), bạn có thể tùy chọn cung cấp thuật toán quy tắc lấp đầy để xác định xem một điểm nằm trong hay ngoài một đường dẫn và do đó liệu điểm đó có được lấp đầy hay không. Điều này hữu ích khi một đường dẫn cắt chính nó hoặc được lồng vào nhau |