Html dòng trắng

Màu sắc

Cho đế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.

Đặt kiểu được sử dụng khi tô hình

Đặt kiểu cho các đường viền của hình dạng

Ghi chú. Khi bạn đặt thuộc tính

Theo 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

Một ví dụ về

2

Trong ví dụ này, một lần nữa chúng ta sử dụng hai vòng lặp

Kết quả trông như thế này

Một ví dụ về

3

Ví dụ này tương tự như ví dụ trên, nhưng sử dụng thuộc tính

  function draw[] {
    const ctx = document.getElementById['canvas'].getContext['2d'];
    for [let i = 0; i 

Kết quả trông như thế này

minh bạch

Ngoà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

Á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

Vì các thuộc tính

Hàm

Một ví dụ về

51

Trong 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

Một ví dụ sử dụng

56

Trong ví dụ thứ hai này, chúng ta làm tương tự như ở trên, nhưng thay vì vẽ các vòng 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

Kiể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

Đặt độ rộng của các đường được vẽ trong tương lai

Đặt sự xuất hiện của các kết thúc của dòng

Đặt hình thức của "các góc" nơi các đường giao nhau

Thiế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

Trả 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

Đặt mẫu gạch ngang dòng hiện tại

Chỉ đị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ề

1

Thuộ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

Để 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à

Để 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

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

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

Đố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 dọc có chiều rộng bằng 0 được vẽ ở đúng vị trí sẽ trở thành đường 2 pixel sắc nét khi được phóng to lên 2 lần và sẽ xuất hiện ở đúng vị trí

Một ví dụ về

6

Thuộc tính

Các đầu của dòng được bình phương tại các điểm cuối

Các đầu của dòng được làm tròn

Cá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

Dòng bên trái sử dụng tùy chọn

Một ví dụ về

001

Thuộc tính

Có ba giá trị có thể có cho thuộc tính này.

Là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

Lấ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

Cá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

Ví 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

Bản demo của tài sản

026

Như bạn đã thấy trong ví dụ trước, khi nối hai đường với tùy chọn

Thuộc tính

Chí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

• 026 = tối đa
  035 /
  1 = 1 / sin [ tối thiểu θ / 2 ]
• Giới hạn miter mặc định là 10. 0 sẽ loại bỏ tất cả các vát đối với các góc nhọn dưới khoảng 11 độ
• Giới hạn vát bằng √2 ≈ 1. 4142136 [làm tròn] sẽ loại bỏ các góc vát cho tất cả các góc nhọn, chỉ giữ các mối nối vát cho góc tù hoặc góc vuông
• Giới hạn miter bằng 1. 0 hợp lệ nhưng sẽ vô hiệu hóa tất cả các bộ giảm tốc
• Các giá trị dưới 1. 0 không hợp lệ đối với giới hạn miter

Đây là một bản trình diễn nhỏ mà bạn có thể thiết lập động

Nếu bạn chỉ định giá trị

Sử dụng dấu gạch ngang

Phương thức

Trong 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

Độ dốc

Giố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

Tạo một đối tượng gradient tuyến tính với điểm bắt đầu là [

Tạ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 [

Tạo một đối tượng gradient hình nón với góc bắt đầu là

Ví dụ

Khi chúng tôi đã tạo một đối tượng

Tạo một điểm dừng màu mới trên đối tượng

Bạ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

Một ví dụ về

070

Trong 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

Đầ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

Một ví dụ về

074

Trong 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].

Trong 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 đó, thì 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

Một ví dụ về

076

Trong 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

Dả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ô

hoa văn

Trong 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

Tạo và trả về một đối tượng mẫu canvas mới.

Loạ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

Xếp hình ảnh theo cả hai hướng dọc và ngang

Xếp hình ảnh theo chiều ngang nhưng không theo chiều dọc

Xếp hình ảnh theo chiều dọc nhưng không theo chiều ngang

Khô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

Ghi chú. Giống như phương thức

Một ví dụ về

096

Trong 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

  function draw[] {
    const ctx = document.getElementById['canvas'].getContext['2d'];
    for [let i = 0; i 

bóng tối

Sử dụng bóng chỉ liên quan đến bốn thuộc tính

Cho 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

Cho 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

Cho biết kích thước của hiệu ứng làm mờ; . Giá trị mặc định là 0

Giá 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

Thuộc tính

Thuộc tính

Ghi chú. Bóng chỉ được vẽ cho các hoạt động tổng hợp

Một ví dụ về văn bản bóng mờ

Ví dụ này vẽ một chuỗi văn bản có hiệu ứng đổ bóng

  function draw[] {
    const ctx = document.getElementById['canvas'].getContext['2d'];
    for [let i = 0; i 

Chúng ta sẽ xem xét thuộc tính

Quy tắc điền canvas

Khi sử dụng