Html dòng trắng

Question

Photoshop thực hiện làm mịn thông minh trên các nét vẽ của bạn. Chỉ cần nhập giá trị (0-100) cho Làm mịn trong thanh Tùy chọn khi bạn đang làm việc với một trong các công cụ sau. Bút lông, Bút chì, Cọ trộn hoặc Tẩy. Giá trị 0 giống với tính năng làm mịn kế thừa trong các phiên bản Photoshop cũ hơn. Các giá trị cao hơn áp dụng số lượng làm mịn thông minh ngày càng tăng cho các nét vẽ của bạn

Nội dung chính Show

Một ví dụ về 2
Một ví dụ về 3
minh bạch
Một ví dụ về 51
Một ví dụ sử dụng 56
Kiểu đường kẻ
Một ví dụ về 1
Một ví dụ về 6
Một ví dụ về 001
Bản demo của tài sản 026
Sử dụng dấu gạch ngang
Độ dốc
Một ví dụ về 070
Một ví dụ về 074
Một ví dụ về 076
Một ví dụ về 096
bóng tối
Một ví dụ về văn bản bóng mờ
Quy tắc điền canvas

Làm mịn nét hoạt động ở một số chế độ. Nhấp vào biểu tượng bánh răng (

) để bật một hoặc nhiều chế độ sau.

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

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

  function draw() {
    const ctx = document.getElementById('canvas').getContext('2d');
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)})`;
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
        ctx.stroke();
      }
    }
  }

9 trên thẻ mở đầu

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

1 trực tiếp trên chính phần tử 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ắ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.

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

4

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

5

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

6 là một chuỗi đại diện cho CSS

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

8)

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3 và/hoặc

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2 hoặc

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7. Mỗi ví dụ sau mô tả cùng một màu

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

5

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

76 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

0

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

1

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

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

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

50 để vẽ hình tròn thay vì hình vuông

  function draw() {
    const ctx = document.getElementById('canvas').getContext('2d');
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)})`;
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
        ctx.stroke();
      }
    }
  }

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

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

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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ô

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

51 có thể hữu ích nếu bạn muốn vẽ nhiều hình dạng trên khung vẽ 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úng

Vì các thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

5

Hàm

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

56 tương tự như hàm

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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ề 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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

51 được đặt tại

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

9

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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ẻ

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

01

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

94

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

95

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

96

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

97

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

98

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

99

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

0

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

04

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Mẫ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à

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

006 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

9. Theo mặc định, thuộc tính này được đặt thành

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

006

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

9

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

07

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Ảnh chụp màn hìnhMẫu trực tiếp

Một ví dụ về 001

Thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

001 xác định cách nối hai đoạn kết nối (đường thẳ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í, được bỏ qua)

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

006,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

019 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

002. Theo mặc định, thuộc tính này được đặt thành

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

002. Lưu ý rằng cài đặt

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

006

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

019

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

002

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

026 được giải thích bên dưới

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

001 này;

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

10

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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ân

Thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

026 này (có giá trị mặc định là 10. 0 trong HTML

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

0), do đó,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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 đường

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

026 = tối đa

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

035 /

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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-zag

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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;

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

13

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

14

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

15

Ảnh chụp màn hìnhMẫu trực tiếp

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

Phương thức

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

040 và thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

041 chỉ định mẫu dấu gạch ngang cho các dòng. Phương thức

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

041 đặt một khoảng cách để bắt đầu mẫu

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

16

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

17

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2 hoặc

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

047

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

048,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

049) và điểm kết thúc là (

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

050,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

051)

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

052

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 (

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

048,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

049) và bán kính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

055, và đường tròn còn lại có tâm tại (

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

050,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

051) với bán kính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

058

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

059

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

060 tính bằng radian, tại vị trí (

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

061,

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

062)

Ví dụ

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

18

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

044, chúng tôi có thể gán màu cho nó bằng cách sử dụng phương pháp

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

064

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

065

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

066.

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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ố

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

6 phải là một chuỗi đại diện cho CSS

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7, cho biết màu mà dải màu sẽ đạt được ở phần bù đó vào quá trình chuyển đổi

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

19

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2 đều có thể chấp nhận đối tượng

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

073 làm đầu vào hợp lệ

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

70

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

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).

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

73

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

075

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

76

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

77

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

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ô

Ảnh chụp màn hìnhMẫu trực tiếp

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

077

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

078

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

079 là nguồn của hình ảnh (tức là, một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

080, một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

081, một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

082 hoặc một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

083 khác, một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

084 hoặc một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

085 hoặc một

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

086).

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

087 là một chuỗi cho biết cách sử dụng hình ảnh

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

088

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

089

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

090

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

091

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2 hoặc

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

3. Ví dụ

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

79

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

2. Điều đáng chú ý duy nhất là việc sử dụng trình xử lý

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

  function draw() {
    const ctx = document.getElementById('canvas').getContext('2d');
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)})`;
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
        ctx.stroke();
      }
    }
  }

0

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Ảnh chụp màn hìnhMẫu trực tiếp

bóng tối

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

099

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

100

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

101

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

102

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

103 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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 định

Thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

Thuộc tính

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

107

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 < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)})`;
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
        ctx.stroke();
      }
    }
  }

3

  function draw() {
    const ctx = document.getElementById('canvas').getContext('2d');
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 6; j++) {
        ctx.strokeStyle = `rgb(0, ${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)})`;
        ctx.beginPath();
        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, 2 * Math.PI, true);
        ctx.stroke();
      }
    }
  }

4

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

7

Mẫu ScreenshotLive

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

108 và phương thức

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

109 trong chương tiếp theo về vẽ văn bản.

Quy tắc điền canvas

Khi sử dụng

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

110 (hoặc

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

111 và

<canvas id="canvas" width="150" height="150" role="presentation">canvas>

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

programming html

Html dòng trắng

Màu sắc

Một ví dụ về 2

Một ví dụ về 3

minh bạch

Một ví dụ về 51

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

Kiểu đường kẻ

Một ví dụ về 1

Một ví dụ về 6

Một ví dụ về 001

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

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

Độ dốc

Một ví dụ về 070

Một ví dụ về 074

Một ví dụ về 076

hoa văn

Một ví dụ về 096

bóng tối

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

Quy tắc điền canvas

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội