search

Hướng dẫn coloured line in html - đường màu trong html

Ngày đăng: 31/10/2022
Trả lời: 0
Lượt xem: 88

Màu sắc được hiển thị kết hợp ánh sáng đỏ, xanh lá cây và xanh dương.

Show

Tên màu

Với CSS, màu sắc có thể được đặt bằng cách sử dụng tên màu:

Giá trị màu CSS

Với CSS, màu sắc có thể được chỉ định theo những cách khác nhau:

  • Theo tên màu
  • Như các giá trị RGB
  • Như các giá trị thập lục phân
  • Như các giá trị HSL (CSS3)
  • Như các giá trị HWB (CSS4)
  • Với từ khóa 
      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();
      }
    }
  }
    6

Màu sắc RGB

Giá trị màu RGB được hỗ trợ trong tất cả các trình duyệt.

Một giá trị màu RGB được chỉ định với: RGB (đỏ, xanh lá cây, xanh dương).RED , GREEN , BLUE ).

Mỗi tham số xác định cường độ của màu là một số nguyên từ 0 đến 255.

Ví dụ: RGB (0,0,255) được hiển thị dưới dạng màu xanh lam, vì tham số màu xanh được đặt thành giá trị cao nhất của nó (255) và các tham số khác được đặt thành 0.

Thí dụ

Màu sắcRGBMàu sắc
RGB& nbsp;RGB (255,0,0)
RGB& nbsp;RGB (255,0,0)
RGB& nbsp;RGB (255,0,0)

Màu đỏ

RGB (0,255,0)

Thí dụ

Màu sắcRGBMàu sắc
RGB& nbsp;RGB (255,0,0)
RGB& nbsp;RGB (255,0,0)
RGB& nbsp;RGB (255,0,0)

Màu đỏ

RGB (0,255,0)

màu xanh lá

RGB (0,0,255)RRGGBB.

Màu xanh da trời

Hãy tự mình thử »

Thí dụ

Màu sắcRGBRGBMàu sắc
RGB& nbsp;& nbsp;RGB (255,0,0)
RGB& nbsp;& nbsp;RGB (255,0,0)
RGB& nbsp;& nbsp;RGB (255,0,0)

Màu đỏ

RGB (0,255,0)

Thí dụ

Màu sắcRGBRGBMàu sắc
RGB& nbsp;& nbsp;RGB (255,0,0)
RGB& nbsp;& nbsp;RGB (255,0,0)
RGB& nbsp;& nbsp;RGB (255,0,0)

Màu đỏ

RGB (0,255,0)

màu xanh lá

RGB (0,0,255)

Tên màu

Màu xanh da trời

Hãy tự mình thử »

Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho tất cả 3 nguồn ánh sáng:RGB (0,0,0)Màu sắc
RGB& nbsp;RGB
& nbsp;RGB (255,0,0)RGB
& nbsp;RGB (255,0,0)RGB
& nbsp;RGB (255,0,0)RGB
& nbsp;RGB (255,0,0)RGB
& nbsp;RGB (255,0,0)RGB
& nbsp;RGB (255,0,0)RGB

& nbsp;

RGB (255,0,0)

Thí dụ

Màu sắc

RGB
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}

Màu đỏ



  • " Trước
  • Tiếp theo "

Trong chương về các hình dạng vẽ, chúng tôi chỉ sử dụng các kiểu mặc định và điền vào các kiểu. Ở đây chúng tôi sẽ khám phá các tùy chọn vải mà chúng tôi có theo ý của chúng tôi để làm cho bản vẽ của chúng tôi hấp dẫn hơn một chút. Bạn sẽ học cách thêm các màu sắc khác nhau, kiểu đường, độ dốc, hoa văn và bóng vào bản vẽ của bạn.

Lưu ý: Nội dung Canvas không thể truy cập được cho người đọc màn hình. Nếu khung vẽ hoàn toàn là trang trí, 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();
      }
    }
  }
8 trên thẻ 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. Mặt khác, bao gồm văn bản mô tả là giá trị của thuộc tính 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0 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à. Canvas content is not accessible to screen readers. If the canvas is purely decorative, include 
  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();
      }
    }
  }
8 on the 
  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 opening tag. Otherwise, include descriptive text as the value of the 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0 attribute directly on the canvas element itself or include fallback content placed within the opening and closing canvas tag. Canvas content is not part of the DOM, but nested fallback content is.

Màu sắc

Cho đến bây giờ chúng ta chỉ thấy các phương pháp của bối 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>
1 và 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2.

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

Đặt kiểu được sử dụng khi lấp đầy hình dạng.

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

Đặt phong cách cho phác thảo của hình dạng.

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
5 là một chuỗi đại diện cho CSS 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
6, đố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à mẫu sau này. Theo mặc định, màu đột quỵ và màu được đặt thành màu đen (giá trị màu CSS 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
7).

Lưu ý: Khi bạn đặt thuộc tính 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 và/hoặc 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1, giá trị mới trở thành 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 trong một màu khác nhau, bạn sẽ cần phải phân công lại thuộc tính 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1 hoặc 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2. When you set the 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 and/or 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1 property, the new value becomes the default for all shapes being drawn from then on. For every shape you want in a different color, you will need to reassign the 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1 or 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 property.

Các chuỗi hợp lệ bạn có thể nhập nên, theo đặc điểm kỹ thuật, là các giá trị CSS 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
6. Mỗi ví dụ sau đây mô tả cùng một màu.

// these all set the fillStyle to 'orange'

ctx.fillStyle = 'orange';
ctx.fillStyle = '#FFA500';
ctx.fillStyle = 'rgb(255, 165, 0)';
ctx.fillStyle = 'rgba(255, 165, 0, 1)';

Một ví dụ 1

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

// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
4 để vẽ một lưới các hình chữ nhật, mỗi vòng có 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 
// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
5 và 
// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
6 để 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à màu xanh lá cây. 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 một cái gì đó trông giống như bảng màu Photoshop sử dụ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}


<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>

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

Một ví dụ 2

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 để thay đổi màu sắc của các phác thảo của hình dạng. Chúng tôi sử dụng phương pháp 
// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
9 để vẽ các vòng 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>

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

Một ví dụ 2

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 để thay đổi màu sắc của các phác thảo của hình dạng. Chúng tôi sử dụng phương pháp 
// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
9 để vẽ các vòng tròn thay vì hình vuông.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
1

Tính minh bạch

Ngoài việc vẽ các hình dạng mờ đục vào khung vẽ, chúng ta cũng có thể vẽ các hình dạng bán trong suốt (hoặc mờ). Điều này được thực hiện bằng cách đặt thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
0 hoặc bằng cách gán màu bán trong suốt cho kiểu đột quỵ và/hoặc điền vào.

Áp dụng giá trị minh bạch được chỉ định cho tất cả các hình dạng trong tương lai được vẽ trên vải. Giá trị phải nằm trong khoảng 0,0 (hoàn toàn trong suốt) đến 1.0 (mờ hoàn toàn). Giá trị này là 1.0 (mờ hoàn toàn) theo mặc định.

// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';

Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
0 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ì nói chung, nó hữu ích hơn khi đặt độ trong suốt trên các hình dạng riêng lẻ khi đặt màu của chúng.

Vì các thuộc tính 2 và 1 chấp nhận các giá trị màu CSS RGBA, chúng ta có thể sử dụng ký hiệu sau để gán màu trong suốt cho chúng.

Hàm 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
5 tương tự như hàm 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
6 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ệ một lần nữa nằm trong khoảng 0,0 (trong suốt hoàn toàn) và 1.0 (mờ hoàn toàn).

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}


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

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); // draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = '#6C0'; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = '#09F'; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = '#F30'; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = '#FFF'; // set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent circles for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } } 0

Trong ví dụ này, chúng tôi sẽ vẽ một nền của bốn hình vuông màu khác nhau. Trên hết, chúng tôi sẽ vẽ một bộ vòng tròn bán trong suốt. Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
0 được đặt tại 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
9 sẽ được sử dụng cho tất cả các hình dạng từ thời điểm đó. Mỗi bước trong vòng 
// Assigning transparent colors to stroke and fill style

ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
4 đều vẽ một tập hợp các vòng tròn với bán kính ngày càng tăng. Kết quả cuối cùng là một gradient xuyên tâm. Bằng cách phủ lên các vòng tròn hơn bao giờ hết, chúng tôi giảm hiệu quả tính minh bạch của các vòng tròn đã được rút ra. Bằng cách tăng số lượng bước và có hiệu lực 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.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}


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

Một ví dụ sử dụng function draw() { const ctx = document.getElementById('canvas').getContext('2d'); // draw background ctx.fillStyle = '#FD0'; ctx.fillRect(0, 0, 75, 75); ctx.fillStyle = '#6C0'; ctx.fillRect(75, 0, 75, 75); ctx.fillStyle = '#09F'; ctx.fillRect(0, 75, 75, 75); ctx.fillStyle = '#F30'; ctx.fillRect(75, 75, 75, 75); ctx.fillStyle = '#FFF'; // set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent circles for (let i = 0; i < 7; i++) { ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } } 5

Trong ví dụ thứ hai này, chúng tôi làm một cái gì đó tương tự như ở trên, nhưng thay vì vẽ các vòng tròn lên nhau, tôi đã vẽ các hình chữ nhật nhỏ với độ mờ ngày càng tăng. Sử dụng 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // draw background
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0, 0, 75, 75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75, 0, 75, 75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0, 75, 75, 75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75, 75, 75, 75);
  ctx.fillStyle = '#FFF';

  // set transparency value
  ctx.globalAlpha = 0.2;

  // Draw semi transparent circles
  for (let i = 0; i < 7; i++) {
    ctx.beginPath();
    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
    ctx.fill();
  }
}
5 cung cấp cho bạn một chút kiểm soát và linh hoạt hơn vì chúng tôi có thể đặt kiểu điền và đột quỵ riêng lẻ.

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

Phong cách dòng

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

Có một số thuộc tính cho phép chúng ta tạo kiểu.

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

Đặt chiều rộng của các dòng được vẽ trong tương lai.

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

Thiết lập một giới hạn trên miter khi hai dòng nối ở một góc sắc nét, để cho phép bạn kiểm soát mức độ dày của ngã ba.

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

Trả về mảng mẫu Dash Dòng hiện tại chứa số lượng số không âm.

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

Đặt mô hình dấu gạch ngang dòng hiện tại.

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

Chỉ định nơi bắt đầu một mảng dấu gạch ngang trên một dòng.

Bạn sẽ hiểu rõ hơn về những gì những điều này làm bằng cách xem xét các ví dụ dưới đây.

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); // Draw background ctx.fillStyle = 'rgb(255, 221, 0)'; ctx.fillRect(0, 0, 150, 37.5); ctx.fillStyle = 'rgb(102, 204, 0)'; ctx.fillRect(0, 37.5, 150, 37.5); ctx.fillStyle = 'rgb(0, 153, 255)'; ctx.fillRect(0, 75, 150, 37.5); ctx.fillStyle = 'rgb(255, 51, 0)'; ctx.fillRect(0, 112.5, 150, 37.5); // Draw semi transparent rectangles for (let i = 0; i < 10; i++) { ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`; for (let j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } } 0

Thuộc tính này đặt độ dày 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 đường là độ dày của đột quỵ tập trung trên đường dẫn đã cho. Nói cách khác, khu vực được vẽ kéo dài đến một nửa chiều rộng đường ở hai bên đường dẫn. Vì tọa độ Canvas không tham chiếu trực tiếp các pixel, nên phải cẩn thận để có được các đường ngang và dọc sắc nét.

Trong ví dụ dưới đây, 10 đường thẳng được vẽ với chiều rộng dòng tăng. Dòng ở phía bên trái là rộng 1.0 đơn vị. Tuy nhiên, các đường dày tối đa và tất cả các đường có độ dày độ rộng kỳ lạ khác không xuất hiện sắc nét, vì vị trí của đường dẫn.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
0

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

Có được các đường nét sắc nét đòi hỏi phải hiểu làm thế nào các đường dẫn được vuốt ve. Trong các hình ảnh dưới đây, lưới đại diện cho lưới tọa độ vải. Các hình vuông giữa các đường lưới là các pixel trên màn hình thực tế. Trong hình ả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) rơi trên các ranh giới pixel, do đó hình chữ nhật được lấp đầy sẽ có các cạnh sắc nét.

Hướng dẫn coloured line in html - đường màu trong html

Nếu bạn xem xét một đường dẫn từ (3,1) đến (3,5) với độ dày đường là 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
1, bạn sẽ kết thúc với 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 nửa đường vào các pixel ở hai bên đường. Một xấp xỉ của điều này phải được hiển thị, điều đó có nghĩa là những pixel đó chỉ được tô màu một phần và dẫn đến toàn bộ khu vực (màu xanh nhạt và màu xanh đậm) được lấp đầy với màu chỉ tối bằng màu đột quỵ thực sự. Đây là những gì xảy ra với dòng chiều rộng 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
1 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 bạn. Biết rằng một đường rộng 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
1 sẽ mở rộng một nửa đơn vị sang hai bên đường dẫn, tạo đường dẫn từ (3,5,1) đến (3,5,5) dẫn đến tình huống trong hình ảnh thứ ba, chiều rộng dòng 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
1 kết thúc hoàn toàn và hoàn toàn Chính xác là lấp đầy một đường thẳng đứng pixel duy nhất.

Lưu ý: Hãy lưu ý rằng trong ví dụ đường thẳng đứng của chúng tôi, vị trí y vẫn tham chiếu một vị trí đường dây số nguyên nếu không, chúng tôi sẽ thấy các pixel với một nửa độ che phủ tại các điểm cuối (nhưng cũng lưu ý rằng hành vi này giá trị mặc định của họ là 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6; bạn có thể muốn tính toán các nét nhất quán với tọa độ nửa pixel cho các dòng chiều rộng lẻ, bằng cách đặt kiểu 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
5 thành 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
8, để đường viền bên ngoài của đột quỵ xung quanh điểm cuối sẽ được mở rộng để che toàn bộ pixel chính xác). Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
5 style whose default value is 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
5 style to 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
8, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

Cũng lưu ý rằng chỉ có các điểm cuối bắt đầu và cuối cùng của một đường dẫn bị ảnh hưởng: nếu một đường dẫn được đóng với 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
9, không có điểm cuối bắt đầu và cuối cùng; Thay vào đó, tất cả các điểm cuối trong đường dẫn được kết nối với phân đoạn trước và tiếp theo được đính kèm của chúng bằng cách sử dụng cài đặt hiện tại của kiểu 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0, có giá trị mặc định là 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1, với hiệu ứng tự động mở rộng các đường viền bên ngoài của các phân đoạn được kết nối đến điểm giao nhau của chúng, vì vậy Rằng đột quỵ được hiển thị chính xác sẽ bao gồm các pixel đầy đủ tập trung ở mỗi điểm cuối nếu các phân đoạn được kết nối đó nằm ngang và/hoặc dọc. 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 dòng chẵn, mỗi nửa kết thúc là một lượng pixel số nguyên, vì vậy bạn muốn một đường dẫn nằm giữa pixel (nghĩa là (3,1) đến (3,5)), thay vì xuống giữa pixel .

Mặc dù hơi đau khi ban đầu làm việc với đồ họa 2D có thể mở rộng, việc chú ý đến lưới pixel và vị trí của các đường dẫn đảm bảo rằng các bản vẽ của bạn sẽ trông chính xác bất kể việc mở rộng hoặc bất kỳ phép biến đổi nào khác liên quan. Một đường thẳng đứng có chiều rộng 1.0 được vẽ ở vị trí chính xác sẽ trở thành một đường 2 pixel sắc nét khi được tỷ lệ lên 2 và sẽ xuất hiện ở vị trí chính xác.

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); // Draw background ctx.fillStyle = 'rgb(255, 221, 0)'; ctx.fillRect(0, 0, 150, 37.5); ctx.fillStyle = 'rgb(102, 204, 0)'; ctx.fillRect(0, 37.5, 150, 37.5); ctx.fillStyle = 'rgb(0, 153, 255)'; ctx.fillRect(0, 75, 150, 37.5); ctx.fillStyle = 'rgb(255, 51, 0)'; ctx.fillRect(0, 112.5, 150, 37.5); // Draw semi transparent rectangles for (let i = 0; i < 10; i++) { ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`; for (let j = 0; j < 4; j++) { ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5); } } } 5

Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
5 xác định cách các điểm cuối của mỗi dòng được rút ra. Có ba giá trị có thể cho thuộc tính này và đó là: 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6, 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
5 và 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
8. Theo mặc định, thuộc tính này được đặt thành 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6:

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6

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

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

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
8

Các đầu của các đường được bỏ ra bằng cách thêm một hộp có chiều rộng bằng nhau và một nửa chiều cao của độ dày của đường.

Trong ví dụ này, chúng tôi sẽ vẽ ba dòng, mỗi dòng có một giá trị khác nhau cho thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
5. 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 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
6 mặc định. Bạn sẽ nhận thấy rằng nó được vẽ hoàn toàn với các hướng dẫn. Thứ hai được đặt để sử dụng tùy chọn 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
5. Điều này thêm một hình bán nguyệt vào cuối có bán kính một nửa chiều rộng của đường. Dòng bên phải sử dụng tùy chọn 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
8. Điều này thêm một hộp có chiều rộng bằng nhau và một nửa chiều cao của độ dày đườ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
2

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

Một ví dụ 0

Thuộc tính 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0 xác định cách hai phân đoạn kết nối (của các đường, vòng cung hoặc đường cong) với các độ dài khác không trong một hình dạng được nối với nhau (phân đoạn thoái hóa với độ dài bằng không, 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ể cho thuộc tính này: 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
5, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
08 và 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1. Theo mặc định, thuộc tính này được đặt thành 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1. Lưu ý rằng cài đặt 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0 không có hiệu lực nếu hai phân đoạn được kết nối có cùng hướng, vì sẽ không có khu vực tham gia nào được thêm vào trong trường hợp này:

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

Làm tròn các góc của một hình dạng bằng cách lấp đầy một khu vực bổ sung của đĩa tập trung vào điểm cuối chung của các phân đ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 đườ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
08

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 phân đ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 mỗi phân đoạn.

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

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 hiệu quả của việc lấp đầy một khu vực hình viên hình thoi bổ sung. Cài đặt này được thực hiện bởi thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 được giải thích dưới đây.

Ví dụ dưới đây vẽ ba đường dẫn khác nhau, chứng minh mỗi trong ba cài đặt thuộc tính 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
0 này; Đầu ra được hiển thị ở trên.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
4

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

Một bản demo của tài sản function draw() { const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } } 15

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

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1, các cạnh bên ngoài của hai dòng nối được mở rộng đến điểm họ gặp nhau. Đối với các đường ở các góc lớn với nhau, điểm này không xa điểm kết nối bên trong. Tuy nhiên, khi các góc giữa mỗi dòng giảm, khoảng cách (chiều dài miter) giữa các điểm này tăng theo cấp số nhân.

Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 xác định điểm kết nối bên ngoài có thể được đặt bao xa từ điểm kết nối bên trong. Nếu hai dòng vượt quá giá trị này, thay vào đó, tham gia vát sẽ được rút ra. Lưu ý rằng chiều dài miter tối đa là sản phẩm của chiều rộng dòng được đo trong hệ tọa độ hiện tại, theo giá trị của thuộc tính 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 này (có giá trị mặc định là 10.0 trong HTML 
  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), do đó 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 có thể được đặt độc lập với màn hình hiện tại Tỷ lệ hoặc bất kỳ biến đổi affine nào của các đườ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, giới hạn MITER là tỷ lệ được phép tối đa của chiều dài 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 dòng và điểm cuối chung của các đoạn kết nối được chỉ định trong đường dẫn) chiều rộng dòng. Nó có thể được định nghĩa tương đương là tỷ lệ tối đa được 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ã ba của các cạnh, so với tổng chiều rộng đường. Sau đó, nó bằng với cosecant của một nửa góc bên trong tối thiểu của các phân đoạn kết nối bên dưới mà không có kết nối nào sẽ được hiển thị, nhưng chỉ có một sự tham gia vát:

  • function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
    15 = Max 
    function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
    24 / 
    function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
    0 = 1 / sin (tối thiểu θ / 2)max 
    function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
    24 / 
    function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  // Draw background
  ctx.fillStyle = 'rgb(255, 221, 0)';
  ctx.fillRect(0, 0, 150, 37.5);
  ctx.fillStyle = 'rgb(102, 204, 0)';
  ctx.fillRect(0, 37.5, 150, 37.5);
  ctx.fillStyle = 'rgb(0, 153, 255)';
  ctx.fillRect(0, 75, 150, 37.5);
  ctx.fillStyle = 'rgb(255, 51, 0)';
  ctx.fillRect(0, 112.5, 150, 37.5);

  // Draw semi transparent rectangles
  for (let i = 0; i < 10; i++) {
    ctx.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10})`;
    for (let j = 0; j < 4; j++) {
      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
    }
  }
}
    0 = 1 / sin ( min θ / 2 )
  • Giới hạn MITER mặc định là 10.0 sẽ tước tất cả các bộ giảm âm cho các góc nhọn dưới khoảng 11 độ.
  • Giới hạn MITER bằng √2 ≈ 1.4142136 (làm tròn lên) sẽ dải giảm tốc độ cho tất cả các góc cấp tính, giữ cho miter chỉ tham gia cho các góc khó hiểu hoặc bên phải.
  • Giới hạn MITER bằng 1.0 là 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ệ cho giới hạn miter.

Đây là một bản demo nhỏ trong đó bạn có thể đặt 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 một cách linh hoạt và xem cách này ảnh hưởng đến hình dạng trên khung vẽ. Các đường màu xanh hiển thị nơi các điểm bắt đầu và điểm cuối cho từng dòng trong mẫu zig-zag.

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 dưới 4.2 trong bản demo này, không có góc nào có thể nhìn thấy sẽ tham gia với phần mở rộng MITER, nhưng chỉ với một góc nhỏ gần các đường màu xanh; Với 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
15 trên 10, hầu hết các góc trong bản demo này nên tham gia với một miter cách xa các đường màu xanh và chiều cao của chúng giảm giữa các góc từ trái sang phải vì chúng kết nối với các góc phát triển; Với các giá trị trung gian, các góc ở phía bên trái sẽ chỉ nối với một góc vát gần các đường màu xanh và các góc ở phía bên phải với phần mở rộng miter (cũng có chiều cao giả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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
6

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
7

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
8

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

Phương thức 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
29 và thuộc tính 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
30 chỉ định mẫu dấu gạch ngang cho các dòng. Phương thức 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
29 chấp nhận một danh sách các số chỉ định khoảng cách để vẽ một cách khác một dòng và một khoảng cách và thuộc tính 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
30 đặt một phần bù để bắt đầu mẫu.

Trong ví dụ này, chúng tôi đang tạo ra một 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 hình ảnh bằng cách hoạt hình đường viền. Trong một phần sau của hướng dẫn này, bạn có thể học cách thực hiện việc này và các hoạt hình cơ bản khác.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
9

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
0

Độ dốc

Cũng giống như bất kỳ chương trình vẽ bình thường nào, chúng ta có thể lấp đầy và đột quỵ hình dạng bằng độ dốc tuyến tính, xuyên tâm và hình nón. Chúng tôi tạo một đối tượ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
33 bằng cách sử dụng một trong các phương thức 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>
1 hoặc 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
36

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
37, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
38) và điểm cuối của (
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
39, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
40).

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
41

Tạo một gradient xuyên tâm. Các tham số đại diện cho hai vòng tròn, một với trung tâm của nó ở (

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
37, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
38) và bán kính 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
44 và cái còn lại với trung tâm của nó tại (
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
39, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
40) với bán kính 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
47.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
48

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
49 trong radian, ở vị trí (
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
50, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
51).

Ví dụ:

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
1

Khi chúng tôi đã tạo một đối tượ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
33, chúng tôi có thể gán màu cho nó bằng cách sử dụng phương thức 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
53.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
54

Tạo một điểm dừng màu mới trên đối tượ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
55. 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
56 là một số từ 0,0 đến 1,0 và xác định vị trí tương đối của màu trong gradient và đối số 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
5 phải là một chuỗi đại diện cho CSS 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
6, cho thấy màu mà độ dốc phải đạt được ở độ lệch đó vào quá trình chuyển đổi.

Bạn có thể thêm nhiều điểm dừng màu vào một gradient như bạn cần. Dưới đây là một gradient tuyến tính rất đơn giản từ trắng đến đen.

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
2

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } } 59

Trong ví dụ này, chúng tôi sẽ tạo hai gradient khác nhau. Như bạn có thể thấy ở đây, cả các thuộc tính 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2 và 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1 đều có thể chấp nhận đối tượ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
62 là đầu vào hợp lệ.

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
3

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

Đầ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 để thực hiện chuyển đổi màu sắc rất sắc nét trong trường hợp này từ màu trắng sang màu xanh lá cây. Thông thường, nó không quan trọng theo thứ tự bạn xác định màu dừng, nhưng trong trường hợp đặc biệt này, nó sẽ làm được đáng kể. Nếu bạn giữ các bài tập theo thứ tự bạn muốn chúng xuất hiện, đây sẽ không phải là vấn đề.

Trong gradient thứ hai, chúng tôi đã không gán màu bắt đầu (ở vị trí 0.0) vì nó không hoàn toàn cần thiết, vì nó sẽ tự động giả định màu của điểm dừng màu tiếp theo. Do đó, việc gán màu đen ở vị trí 0,5 tự động làm cho gradient, từ đầu đến điểm dừng này, màu đen.

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } } 63

Trong ví dụ này, chúng tôi sẽ xác định bốn độ dốc hướng tâm khác nhau. Bởi vì chúng ta có quyền kiểm soát các điểm bắt đầu và đóng của độ dốc, chúng ta có thể đạt được các hiệu ứng phức tạp hơn so với bình thường trong các độ dốc hướng tâm "cổ điển" mà chúng ta thấy trong Điểm nơi độ dốc mở rộng ra ngoài trong một hình tròn).

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
5

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

Trong trường hợp này, chúng tôi đã bù một chút điểm bắt đầu từ điểm cuối để đạ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 chéo vì điều này dẫn đến các hiệu ứng kỳ lạ khó dự đoán.

Điểm dừng màu cuối cùng trong mỗi bốn độ dốc sử dụng màu hoàn toàn trong suốt. Nếu bạn muốn có một quá trình chuyển đổi tốt đẹp từ điểm 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 làm trình diễn, nhưng trong gradient đầu tiên 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
64.

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } } 65

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ó vòng quanh một điểm.

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
7

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
8

Độ dốc đầu tiên được đặt ở trung tâm của hình chữ nhật đầu tiên và di chuyển một điểm dừng màu xanh lá cây khi bắt đầu, đến một màu trắng ở cuối. Góc bắt đầu ở 2 radian, điều này đáng chú ý vì đường bắt đầu/cuối hướng về phía đông nam.

Độ dốc thứ hai cũng được đặt ở trung 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ư của vòng quay. Điều này cho chúng ta hiệu ứng rô.

Mô hình

Trong một trong các ví dụ trên trang trước, chúng tôi đã sử dụng một loạt các vòng lặp để tạo ra một 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 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
66.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
67

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
68 là nguồn gốc của hình ảnh (nghĩa là 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
69, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
70, một 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
71 khác hoặc 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
72, 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
73 hoặc 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
74 hoặc 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
75). 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
76 là một chuỗi chỉ ra 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:

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
77

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
78

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
79

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
80

Không gạch hình ảnh. Nó chỉ được sử dụng một lần.

Chúng tôi sử dụng phương pháp này để tạo một đối tượ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
81 rất giống với các phương thức gradient mà chúng tôi đã 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>
1 hoặc 
<canvas id="canvas" width="150" height="150" role="presentation">canvas>
2. Ví dụ:

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
9

Lưu ý: Giống như với phương thức 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
84, 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 hoặc mẫu có thể được vẽ không chính xác. Like with the 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
84 method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

Một ví dụ function draw() { const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`; ctx.fillRect(j * 25, i * 25, 25, 25); } } } 85

Trong ví dụ cuối cùng này, chúng tôi sẽ tạo một mẫu để gán cho thuộc tính 

<canvas id="canvas" width="150" height="150" role="presentation">canvas>
1. Điều duy nhất đáng chú ý là việc sử dụng trình xử lý 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
87 của hình ảnh. Điều này là để đảm bảo hình ảnh được tải trước khi nó đượ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>

Bóng tối

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
88

Cho biết khoảng cách ngang, bóng nên mở rộng 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.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
89

Cho biết khoảng cách dọc, bóng nên 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.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
90

Chỉ ra kích thước của hiệu ứng làm mờ; Giá trị này không tương ứng với một số pixel và không bị ảnh hưởng bởi ma trận chuyển đổi hiện tại. Giá trị mặc định là 0.

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
91

Một giá trị màu CSS tiêu chuẩn biểu thị màu của hiệu ứng bóng; Theo mặc định, nó có màu đen hoàn toàn trong suốt.

Các thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
92 và 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
93 cho biết bóng sẽ kéo dài bao xa từ đối tượng theo hướng x và y; Các giá trị này không bị ảnh hưởng bởi ma trận chuyển đổi hiện tại. Sử dụng các giá trị âm để khiến bóng tối mở rộng hoặc sang trái và các giá trị dương để khiến bóng tối mở rộng hoặc sang phải. Cả hai đều là 0 theo mặc định.

Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
94 cho biết kích thước của hiệu ứng làm mờ; Giá trị này không tương ứng với một số pixel và không bị ảnh hưởng bởi ma trận chuyển đổi hiện tại. Giá trị mặc định là 0.

Thuộc tính 

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
95 là giá trị màu CSS tiêu chuẩn biểu thị màu của hiệu ứng bóng; Theo mặc định, nó có màu đen hoàn toàn trong suốt.

Một ví dụ văn bản bị che giấu

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

  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();
      }
    }
  }
2

  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

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

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
96 và phương thức 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
97 trong chương tiếp theo về văn bản vẽ.

Canvas lấp đầy các quy tắc

Khi sử dụ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.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
98 (hoặc 
function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 6; j++) {
      ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)}, ${Math.floor(255 - 42.5 * j)}, 0)`;
      ctx.fillRect(j * 25, i * 25, 25, 25);
    }
  }
}
99 và 
<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
00), bạn có thể tùy chọn cung cấp thuật toán quy tắc điền để xác định xem một điểm nằm trong hay bên ngoài đường dẫn và do đó nếu nó được điền hay không. Điều này rất hữu ích khi một đường dẫn tự giao hoặc được lồng.

Hai giá trị là có thể:

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
01

Quy tắc cuộn dây khác không, đó là quy tắc mặc định.

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
02

Quy tắc cuộn dây chẵn.

Trong ví dụ này, chúng tôi đang sử dụng quy tắc 

<canvas id="canvas" width="150" height="150">A 6 by 6 square grid displaying 36 different colorscanvas>
02.

  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

  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();
      }
    }
  }
5

  • " Trước
  • Tiếp theo "

programming html W3School A CSS Color tag CSS a tag Style link CSS HTML color Canvas draw line

Bài Viết Liên Quan

Top hãng mặt nạ nội địa trung quốc năm 2024
Top hãng mặt nạ nội địa trung quốc năm 2024

mẹo hay Top List Top
Giải hóa 8 bài nồng độ dung dịch năm 2024
Giải hóa 8 bài nồng độ dung dịch năm 2024

mẹo hay
Goh là viết tắt của gì trong tiếng anh năm 2024
Goh là viết tắt của gì trong tiếng anh năm 2024

là ai Học Tốt Tiếng anh GOH container Container lạnh
Bao cáo đầu tư mua đất để làm văn phòng năm 2024
Bao cáo đầu tư mua đất để làm văn phòng năm 2024

mẹo hay
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024

là ai Hỏi Đáp Là gì
Tìm hiểu chung về văn bản nghị luận năm 2024
Tìm hiểu chung về văn bản nghị luận năm 2024

mẹo hay
Sử lý lỗi không lăng được chuột trong sketchup năm 2024
Sử lý lỗi không lăng được chuột trong sketchup năm 2024

mẹo hay Công Nghệ Chuột
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
Bài tập tìm hằng số cân bằng hoá 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Băn khoăn có nghĩa là gì năm 2024
Băn khoăn có nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024
Hệ số lương 1.78 tương ứng ngạch nào năm 1996 năm 2024

mẹo hay
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024
Bánh rau câu sinh nhật chứa bao nhiêu calo năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Món Ngon Bánh
Họ tiếng nhật của bạn là gì năm 2024
Họ tiếng nhật của bạn là gì năm 2024

là ai Hỏi Đáp Là gì
Ý nghĩa của header from top là gì năm 2024
Ý nghĩa của header from top là gì năm 2024

mẹo hay Hỏi Đáp Là gì Top List Top Header la gì Footer la gì
Tự học tiếng anh như thế nào hiệu quả năm 2024
Tự học tiếng anh như thế nào hiệu quả năm 2024

mẹo hay Hỏi Đáp Thế nào Học Tốt Học Tiếng anh Học tiếng Anh
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024
Cơ thể con người năm hiến máu bao nhiêu lần năm 2024

bao nhieu Hỏi Đáp Bao nhiêu Khỏe Đẹp Cơ thể
Tuổi đinh mão xây nhà năm nào tốt năm 2024
Tuổi đinh mão xây nhà năm nào tốt năm 2024

mẹo hay Xây Đựng Xây Nhà
Khoán chi đến sản phẩm cuối cùng là gì năm 2024
Khoán chi đến sản phẩm cuối cùng là gì năm 2024

là ai Hỏi Đáp Là gì
Các yếu tố cấu thành văn hóa tổ chức năm 2024
Các yếu tố cấu thành văn hóa tổ chức năm 2024

mẹo hay
Thế nào là số vô tỉ cho ví dụ năm 2024
Thế nào là số vô tỉ cho ví dụ năm 2024

mẹo hay Hỏi Đáp Thế nào Ví dụ
Quà trung thu tiếng anh là gì năm 2024
Quà trung thu tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh Mid-Autumn gift

Quảng Cáo

Có thể bạn quan tâm

Bài tập trắc nghiệm phương trình chứa căn lớp 10 năm 2024
1 tháng trước . bởi CivilDiver
Sữa rửa mặt whoo đỏ review năm 2024
1 tháng trước . bởi UncertainAuthority
Dđộng mạch và tĩnh mạch khác nhau như thế nào năm 2024
1 tháng trước . bởi FoamingSharpness
Bài tập giới hạn của hàm số mathvn năm 2024
2 tháng trước . bởi UnfocusedBallet
Giải bài tập công nghệ 7 trong vbt bài 31 năm 2024
2 tháng trước . bởi FundamentalAirtime
Bóng đèn cực tím 1m2 công suất bao nhiêu watt năm 2024
2 tháng trước . bởi TrackingTrilogy
Cơ sở của giá trị hàng hóa là gì năm 2024
2 tháng trước . bởi Fast-foodLineage
Cách sửa lỗi trong speakers properties ko hiện enhancement năm 2024
2 tháng trước . bởi MilitaryTracing
Giải bài tập toán lớp 5 tập 2 bài 163 năm 2024
2 tháng trước . bởi ThoughtlessEnclosure
Miracle in cell number 7 review năm 2024
2 tháng trước . bởi UndeniableFiring

Toplist được quan tâm

#1
Top 7 sự tích hồ gươm - ngữ văn lớp 6 2023
5 tháng trước
#2
Top 7 gdcd 6 bài 1 kết nối tri thức 2023
5 tháng trước
#3
Top 7 ý nghĩa của xây dựng gia đình văn hóa 2023
5 tháng trước
#4
Top 6 mẫu hợp đồng mượn đất làm nhà xưởng 2023
5 tháng trước
#5
Top 3 tổng tài biến thái tôi yêu anh tập 27 2023
5 tháng trước
#6
Top 6 kết thực phim mỹ nhân vô lệ 2023
5 tháng trước
#7
Top 9 trong những câu thơ sau câu nào sử dụng thành ngữ 2023
5 tháng trước
#8
Top 8 đề tài và chủ de của tác phẩm tắt đèn 2023
5 tháng trước
#9
Top 5 tiểu sử của thầy thích pháp hòa 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Top hãng mặt nạ nội địa trung quốc năm 2024
21 giờ trước
Bài tập tìm hằng số cân bằng hoá 11 năm 2024
1 tuần trước
Giải hóa 8 bài nồng độ dung dịch năm 2024
2 ngày trước
Băn khoăn có nghĩa là gì năm 2024
1 tuần trước
Goh là viết tắt của gì trong tiếng anh năm 2024
3 ngày trước
Tìm hiểu chung về văn bản nghị luận năm 2024
1 tuần trước
Anh bộ đội cụ hồ gốc bỉ là gì năm 2024
6 ngày trước
Cải lương chi bảo là gì năm 2024
13 giờ trước
Bao cáo đầu tư mua đất để làm văn phòng năm 2024
4 ngày trước
Sử lý lỗi không lăng được chuột trong sketchup năm 2024
1 tuần trước

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Học Tốt Inc.