search

Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Ngày đăng: 17/11/2022
Trả lời: 0
Lượt xem: 152

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

Bây giờ chúng tôi đã thiết lập môi trường vải của mình, chúng tôi có thể đi vào các chi tiết về cách vẽ trên vải. Đến cuối bài viết này, bạn sẽ học được cách vẽ hình chữ nhật, hình tam giác, đường, vòng cung và đường cong, cung cấp sự quen thuộc với một số hình dạng cơ bản. Làm việc với các đường dẫn là điều cần thiết khi vẽ các đối tượng lên khung vẽ và chúng ta sẽ thấy cách đó có thể được thực hiện.

Show

Cái lưới sắt

Trước khi chúng ta có thể bắt đầu vẽ, chúng ta cần nói về lưới vải hoặc không gian phối hợp. Bộ xương HTML của chúng tôi từ trang trước có phần tử canvas rộng 150 pixel và cao 150 pixel.coordinate space. Our HTML skeleton from the previous page had a canvas element 150 pixels wide and 150 pixels high.

Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Thông thường 1 đơn vị trong lưới tương ứng với 1 pixel trên vải. Nguồn gốc của lưới này được đặt ở góc trên cùng bên trái tại tọa độ (0,0). Tất cả các yếu tố được đặt liên quan đến nguồn gốc này. Vì vậy, vị trí của góc trên bên trái của hình vuông màu xanh trở thành X pixel từ bên trái và y pixel từ trên cùng, ở tọa độ (x, y). Sau này trong hướng dẫn này, chúng ta sẽ xem cách chúng ta có thể dịch nguồn gốc sang một vị trí khác, xoay lưới và thậm chí mở rộng quy mô, nhưng bây giờ chúng ta sẽ bám vào mặc định.

Vẽ hình chữ nhật

Không giống như SVG, 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
0 chỉ hỗ trợ hai hình dạng nguyên thủy: hình chữ nhật và đường dẫn (danh sách các điểm được kết nối theo dòng). Tất cả các hình dạng khác phải được tạo bằng cách kết hợp một hoặc nhiều đường dẫn. May mắn thay, chúng tôi có một loại các chức năng vẽ đường dẫn giúp nó có thể tạo ra các hình dạng rất phức tạp.

Đầu tiên chúng ta hãy nhìn vào hình chữ nhật. Có ba chức năng vẽ hình chữ nhật trên vải:

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
1

Vẽ một hình chữ nhật đầy.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
2

Vẽ một phác thảo hình chữ nhật.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
3

Xóa diện tích hình chữ nhật được chỉ định, làm cho nó hoàn toàn trong suốt.

Mỗi trong ba chức năng này có cùng một tham số. 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5 Chỉ định vị trí trên vải (liên quan đến nguồn gốc) của góc trên cùng bên trái của hình chữ nhật. 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
6 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
7 cung cấp kích thước của hình chữ nhật.

Dưới đây là hàm 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
8 từ trang trước, nhưng bây giờ nó đang sử dụng ba chức năng này.

Ví dụ hình chữ nhật

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}

Đầu ra của ví dụ này được hiển thị bên dưới.

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Hàm 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
9 vẽ một hình vuông màu đen lớn 100 pixel ở mỗi bên. Hàm 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
0 sau đó xóa một hình vuông 60x60 pixel từ trung tâm, và sau đó 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
1 được gọi để tạo một đường viền hình chữ nhật 50x50 pixel trong hình vuông bị xóa.

Trong các trang sắp tới, chúng ta sẽ thấy hai phương pháp thay thế cho 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
0 và chúng ta cũng sẽ thấy cách thay đổi màu sắc và kiểu vuốt của các hình dạng được hiển thị.

Không giống như các chức năng đường dẫn mà chúng ta sẽ thấy trong phần tiếp theo, cả ba hàm hình chữ nhật đều vẽ ngay lập tức vào khung vẽ.

Vẽ đường dẫn

Bây giờ chúng ta hãy nhìn vào các con đường. Một đường dẫn là một danh sách các điểm, được kết nối bởi các phân đoạn của các dòng có thể có các hình dạng khác nhau, cong hoặc không, có chiều rộng khác nhau và màu sắc khác nhau. Một con đường, hoặc thậm chí là một đường dẫn phụ, có thể được đóng lại. Để tạo hình dạng bằng đường dẫn, chúng tôi thực hiện một số bước bổ sung:

  1. Đầu tiên, bạn tạo đường dẫn.
  2. Sau đó, bạn sử dụng các lệnh vẽ để vẽ vào đường dẫn.
  3. Khi đường dẫn đã được tạo ra, bạn có thể vuốt hoặc lấp đầy đường dẫn để kết xuất nó.

Dưới đây là các chức năng được sử dụng để thực hiện các bước sau:

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3

Tạo ra một con đường mới. Sau khi được tạo, các lệnh vẽ trong tương lai được hướng vào đường dẫn và được sử dụng để xây dựng đường dẫn lên.

Phương pháp đường dẫn

Phương pháp để đặt các đường dẫn khác nhau cho các đối tượng.

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
4

Thêm một đường thẳng vào đường dẫn, đi đến đầu đường dẫn phụ hiện tại.

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
5

Vẽ hình dạng bằng cách vuốt ve phác thảo của nó.

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
6

Vẽ một hình dạng vững chắc bằng cách lấp đầy khu vực nội dung của đường dẫn.

Bước đầu tiên để tạo một đường dẫn là gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3. Trong nội bộ, các đường dẫn được lưu trữ dưới dạng danh sách các đường dẫn phụ (đường, vòng cung, v.v.) cùng nhau tạo thành một hình dạng. Mỗi khi phương thức này được gọi, danh sách được đặt lại và chúng ta có thể bắt đầu vẽ các hình dạng mới.

Lưu ý: Khi đường dẫn hiện tại trống, chẳng hạn như ngay sau khi gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3 hoặc trên một khung vẽ mới được tạo, lệnh xây dựng đường dẫn đầu tiên luôn được coi là 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9, bất kể nó thực sự là gì. Vì lý do đó, bạn hầu như sẽ luôn muốn đặt vị trí bắt đầu cụ thể của mình sau khi đặt lại đường dẫn. When the current path is empty, such as immediately after calling 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3, or on a newly created canvas, the first path construction command is always treated as a 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9, regardless of what it actually is. For that reason, you will almost always want to specifically set your starting position after resetting a path.

Bước thứ hai là gọi các phương thức thực sự chỉ định các đường dẫn được rút ra. Chúng ta sẽ thấy những điều này trong thời gian ngắn.

Bước thứ ba, và một bước tùy chọn, là gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
4. Phương pháp này cố gắng đóng hình dạng bằng cách vẽ một đường thẳng từ điểm hiện tại đến đầu. Nếu hình dạng đã được đóng hoặc chỉ có một điểm trong danh sách, chức năng này không làm gì cả.

Lưu ý: Khi bạn gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
6, mọi hình dạng mở đều được đóng tự động, vì vậy bạn không phải gọi 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
4. Đây không phải là trường hợp khi bạn gọi 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
5. When you call 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
6, any open shapes are closed automatically, so you don't have to call 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
4. This is not the case when you call 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
5.

Vẽ một tam giác

Ví dụ, mã để vẽ một hình tam giác sẽ trông giống như thế này:

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>


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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}

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

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Di chuyển bút

Một chức năng rất hữu ích, không thực sự vẽ bất cứ thứ gì nhưng trở thành một phần của danh sách đường dẫn được mô tả ở trên, là hàm 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9. Bạn có thể nghĩ tốt nhất về điều này khi nâng một cây bút hoặc bút chì từ một điểm trên một mảnh giấy và đặt nó vào phần tiếp theo.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>
5

Di chuyển bút đến các tọa độ được chỉ định bởi 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5.

Khi Canvas được khởi tạo hoặc 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3 được gọi, bạn thường sẽ muốn sử dụng hàm 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để đặt điểm bắt đầu ở một nơi khác. Chúng tôi cũng có thể sử dụng 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để vẽ các đường dẫn không kết nối. Hãy nhìn vào khuôn mặt cười bên dưới.

Để thử điều này cho chính mình, bạn có thể sử dụng đoạn mã bên dưới. Chỉ cần dán nó vào hàm 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
8 mà chúng ta đã thấy trước đó.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}

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

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Di chuyển bút

Một chức năng rất hữu ích, không thực sự vẽ bất cứ thứ gì nhưng trở thành một phần của danh sách đường dẫn được mô tả ở trên, là hàm 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9. Bạn có thể nghĩ tốt nhất về điều này khi nâng một cây bút hoặc bút chì từ một điểm trên một mảnh giấy và đặt nó vào phần tiếp theo. To learn more about the 
function draw() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}
3 function, see the Arcs section below.

Di chuyển bút đến các tọa độ được chỉ định bởi 4 và 5.

Khi Canvas được khởi tạo hoặc 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3 được gọi, bạn thường sẽ muốn sử dụng hàm 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để đặt điểm bắt đầu ở một nơi khác. Chúng tôi cũng có thể sử dụng 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để vẽ các đường dẫn không kết nối. Hãy nhìn vào khuôn mặt cười bên dưới.

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

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}
5

Để thử điều này cho chính mình, bạn có thể sử dụng đoạn mã bên dưới. Chỉ cần dán nó vào hàm 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
8 mà chúng ta đã thấy trước đó.

Nếu bạn muốn xem các dòng kết nối, bạn có thể xóa các dòng gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9.

Lưu ý: Để tìm hiểu thêm về hàm 

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

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}
3, hãy xem phần ARCS bên dưới.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
  }
}

Dòng

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Di chuyển bút

Một chức năng rất hữu ích, không thực sự vẽ bất cứ thứ gì nhưng trở thành một phần của danh sách đường dẫn được mô tả ở trên, là hàm function draw() { const canvas = document.getElementById('canvas'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); } } 9. Bạn có thể nghĩ tốt nhất về điều này khi nâng một cây bút hoặc bút chì từ một điểm trên một mảnh giấy và đặt nó vào phần tiếp theo.

Di chuyển bút đến các tọa độ được chỉ định bởi 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>
6

Khi Canvas được khởi tạo hoặc 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
3 được gọi, bạn thường sẽ muốn sử dụng hàm 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để đặt điểm bắt đầu ở một nơi khác. Chúng tôi cũng có thể sử dụng 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 để vẽ các đường dẫn không kết nối. Hãy nhìn vào khuôn mặt cười bên dưới.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>
7

Để thử điều này cho chính mình, bạn có thể sử dụng đoạn mã bên dưới. Chỉ cần dán nó vào hàm 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
8 mà chúng ta đã thấy trước đó.

Nếu bạn muốn xem các dòng kết nối, bạn có thể xóa các dòng gọi 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9.

Lưu ý: Để tìm hiểu thêm về hàm 

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

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}
3, hãy xem phần ARCS bên dưới. Angles in the 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>
8 function are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
  }
}
7.

Dòng

Để vẽ các đường thẳng, hãy sử dụng phương pháp 

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

    ctx.beginPath();
    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
    ctx.moveTo(110, 75);
    ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
    ctx.moveTo(65, 65);
    ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
    ctx.moveTo(95, 65);
    ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
    ctx.stroke();
  }
}
4.

Vẽ một dòng từ vị trí vẽ hiện tại đến vị trí được chỉ định bởi 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5.

Phương pháp này có hai đối số, 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5, là tọa độ của điểm cuối của dòng. Điểm bắt đầu phụ thuộc vào các đường dẫn được vẽ trước đó, trong đó điểm cuối của đường dẫn trước là điểm bắt đầu cho phần sau, v.v ... Điểm bắt đầu cũng có thể được thay đổi bằng cách sử dụng phương thức 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9.

Ví dụ dưới đây vẽ hai hình tam giác, một hình đầy và một được phác thảo. This example requires a slightly larger canvas than the others on this page: 150 x 200 pixels.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="200">canvas>
  body>
html>


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

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Di chuyển bút

Một chức năng rất hữu ích, không thực sự vẽ bất cứ thứ gì nhưng trở thành một phần của danh sách đường dẫn được mô tả ở trên, là hàm 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9. Bạn có thể nghĩ tốt nhất về điều này khi nâng một cây bút hoặc bút chì từ một điểm trên một mảnh giấy và đặt nó vào phần tiếp theo.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="200">canvas>
  body>
html>
7

Vẽ một đường cong Bézier bậc hai từ vị trí PEN hiện tại đến điểm cuối được chỉ định bởi 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5, sử dụng điểm kiểm soát được chỉ định bởi 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
0 và 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
1.

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

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
2

Vẽ một đường cong Bézier hình khối từ vị trí bút hiện tại đến điểm cuối được chỉ định bởi 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5, sử dụng các điểm kiểm soát được chỉ định bởi (
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
0, 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
1) và (CP2X, CP2Y).

Sự khác biệt giữa những điều này là một đường cong Bézier bậc hai có điểm bắt đầu và điểm cuối (các chấm màu xanh) và chỉ một điểm điều khiển (được biểu thị bằng chấm đỏ) trong khi đường cong Bézier khối sử dụng hai điểm điều khiển.control point (indicated by the red dot) while a cubic Bézier curve uses two control points.

Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Các tham số 

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5 trong cả hai phương pháp này là tọa độ của điểm cuối. 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
0 và 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    for (let i = 0; i < 4; i++) {
      for (let j = 0; j < 3; j++) {
        ctx.beginPath();
        const x = 25 + j * 50; // x coordinate
        const y = 25 + i * 50; // y coordinate
        const radius = 20; // Arc radius
        const startAngle = 0; // Starting point on circle
        const endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        const counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

        if (i > 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
1 là tọa độ của điểm điều khiển đầu tiên và 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
01 và 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
02 là tọa độ của điểm điều khiển thứ hai.

Sử dụng các đường cong Bézier bậc hai và khối có thể khá khó khăn, bởi vì không giống như phần mềm vẽ vector như Adobe Illustrator, chúng tôi không có phản hồi trực quan trực tiếp về những gì chúng tôi đang làm. Điều này làm cho nó khá khó để vẽ các hình dạng phức tạp. Trong ví dụ sau, chúng tôi sẽ vẽ một số hình dạng hữu cơ đơn giản, nhưng nếu bạn có thời gian và, hầu hết, sự kiên nhẫn, hình dạng phức tạp hơn nhiều có thể được tạo ra.

Không có gì rất khó khăn trong những ví dụ này. Trong cả hai trường hợp, chúng ta thấy một sự kế thừa của các đường cong được vẽ cuối cùng dẫn đến một hình dạng hoàn chỉnh.

Đường cong bậc hai

Ví dụ này sử dụng nhiều đường cong Bézier bậc hai để hiển thị một quả bóng phát biểu.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
1

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Đường cong hình khối

Ví dụ này vẽ một trái tim bằng cách sử dụng các đường cong Bézier khối.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
3

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Đường cong hình khối

Ví dụ này vẽ một trái tim bằng cách sử dụng các đường cong Bézier khối.

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
04

Hình chữ nhật

Ngoài ba phương pháp mà chúng tôi đã thấy trong việc vẽ hình chữ nhật, vẽ hình dạng hình chữ nhật trực tiếp vào khung vẽ, cũng có phương thức 

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
03, thêm đường dẫn hình chữ nhật đến một đường dẫn hiện đang mở.

Vẽ một hình chữ nhật có góc trên bên trái được chỉ định bởi ( 4, 5) với 6 và 7 được chỉ định.

Trước khi phương thức này được thực thi, phương thức 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 được tự động gọi với các tham số (x, y). Nói cách khác, vị trí bút hiện tại được tự động đặt lại về tọa độ mặc định.

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="150" height="150">canvas>
  body>
html>


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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
5

Thực hiện kết hợp

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Đường cong hình khối

Ví dụ này vẽ một trái tim bằng cách sử dụng các đường cong Bézier khối.

Hình chữ nhật

Ngoài ba phương pháp mà chúng tôi đã thấy trong việc vẽ hình chữ nhật, vẽ hình dạng hình chữ nhật trực tiếp vào khung vẽ, cũng có phương thức 

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
03, thêm đường dẫn hình chữ nhật đến một đường dẫn hiện đang mở.

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
15

Vẽ một hình chữ nhật có góc trên bên trái được chỉ định bởi (

<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
4, 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
5) với 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
6 và 
<html lang="en">
  <body onload="draw();">
    <canvas id="canvas" width="100" height="100">canvas>
  body>
html>
7 được chỉ định.
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
15 constructor returns a newly instantiated 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
13 object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path data.

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
6

Trước khi phương thức này được thực thi, phương thức 

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

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}
9 được tự động gọi với các tham số (x, y). Nói cách khác, vị trí bút hiện tại được tự động đặt lại về tọa độ mặc định.

Thực hiện kết hợp

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
25

Cho đến nay, mỗi ví dụ trên trang này chỉ sử dụng một loại hàm đường dẫn trên mỗi hình dạng. Tuy nhiên, không có giới hạn đối với số hoặc loại đường dẫn bạn có thể sử dụng để tạo hình dạng. Vì vậy, trong ví dụ cuối cùng này, hãy kết hợp tất cả các chức năng đường dẫn để tạo ra một tập hợp các nhân vật trò chơi rất nổi tiếng.

Hình ảnh kết quả trông như thế này:

Chúng tôi sẽ không xem xét điều này một cách chi tiết, vì nó thực sự đơn giản đến mức đáng ngạc nhiên. Những điều quan trọng nhất cần lưu ý là việc sử dụng thuộc tính 

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
10 trên bối cảnh vẽ và sử dụng hàm tiện ích (trong trường hợp này là 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
11). Sử dụng các chức năng tiện ích cho các bit của bản vẽ bạn thường có thể rất hữu ích và giảm lượng mã bạn cần, cũng như sự phức tạp của nó.

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
7

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
8

Ảnh chụp màn hìnhMẫu sống
Hướng dẫn how to draw a triangle in javascript - cách vẽ tam giác trong javascript

Sử dụng đường dẫn SVG

Một tính năng mạnh mẽ khác của API Canvas 

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
13 mới là sử dụng dữ liệu đường dẫn SVG để khởi tạo các đường dẫn trên khung vẽ của bạn. Điều này có thể cho phép bạn truyền qua dữ liệu đường dẫn và sử dụng lại chúng trong cả hai, SVG và Canvas.

Đường dẫn sẽ di chuyển đến điểm (

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
32) và sau đó di chuyển theo chiều ngang 80 điểm sang phải (
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
33), sau đó xuống 80 điểm (
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
34), sau đó 80 điểm ở bên trái (
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
35), sau đó trở lại đầu (
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
36). Bạn có thể thấy ví dụ này trên trang trình xây dựng 
function draw() {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
13.

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

    ctx.fillRect(25, 25, 100, 100);
    ctx.clearRect(45, 45, 60, 60);
    ctx.strokeRect(50, 50, 50, 50);
  }
}
9

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

Các hình dạng trong JavaScript là gì?

Constructors..
Hình dạng.circle (trung tâm, bán kính) tạo ra một mục hình tròn.....
Hình dạng.circle (đối tượng) ....
Hình dạng.Rectangle (Hình chữ nhật [, bán kính]) ....
Hình dạng.Rectangle (điểm, kích thước) ....
Hình dạng.RECTANGLE (từ, đến) ....
Hình dạng.RECTANGLE (Đối tượng) ....
SHAPE.ellipse (hình chữ nhật) ....
Shape.Ellipse(object).

Mã để vẽ một hình chữ nhật trong JavaScript là gì?

Phương thức trực tràng () tạo ra một hình chữ nhật.Mẹo: Sử dụng phương thức đột quỵ () hoặc fill () để thực sự vẽ hình chữ nhật trên khung vẽ.rect() method creates a rectangle. Tip: Use the stroke() or the fill() method to actually draw the rectangle on the canvas.

Chúng ta có thể vẽ hình dạng trong HTML5 không?

Bạn có thể vẽ các hình dạng như vòng tròn, hình chữ nhật, đường, vv bằng SVG trong HTML5 một cách dễ dàng.Hãy xem một ví dụ để vẽ một hình chữ nhật bằng SVG.. Let's see an example to draw a rectangle using SVG.

programming javascript Triangle JavaScript w3schools Right triangle js Draw triangle canvas Canvas triangle w3schools Clear canvas Canvas draw text

Bài Viết Liên Quan

Bài văn tả bạn cùng lớp con gai năm 2024
Bài văn tả bạn cùng lớp con gai năm 2024

mẹo hay
Swift code vietcombank đà nẵng mã ở sau là gì năm 2024
Swift code vietcombank đà nẵng mã ở sau là gì năm 2024

là ai Hỏi Đáp Là gì Swift Code Vietcombank
Chia cột cho văn bản mà đoạn đầu ko chia năm 2024
Chia cột cho văn bản mà đoạn đầu ko chia năm 2024

mẹo hay
Phan mem máy chấm công báo lỗi phát sinh năm 2024
Phan mem máy chấm công báo lỗi phát sinh năm 2024

mẹo hay Công Nghệ Máy
Base metal bezel nghĩa là gì năm 2024
Base metal bezel nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì Stainless steel
Trọng tâm của chiến tranh đặc biệt là gì năm 2024
Trọng tâm của chiến tranh đặc biệt là gì năm 2024

là ai Hỏi Đáp Là gì
Lỗi cài đặt gmail trên iphone bị văng năm 2024
Lỗi cài đặt gmail trên iphone bị văng năm 2024

mẹo hay Công Nghệ Iphone
Biên khả năng thanh toán tieng anh la gi năm 2024
Biên khả năng thanh toán tieng anh la gi năm 2024

mẹo hay
Viết đoạn văn 5-7 câu về chủ đề học tập năm 2024
Viết đoạn văn 5-7 câu về chủ đề học tập năm 2024

mẹo hay Học Tốt Học
The traw that broke the camels back là gì năm 2024
The traw that broke the camels back là gì năm 2024

là ai Hỏi Đáp Là gì
Top 5 điểm du lịch ở đà lạt năm 2024
Top 5 điểm du lịch ở đà lạt năm 2024

mẹo hay Top List Top
Tra cứu thông tin thanh toán home credit năm 2024
Tra cứu thông tin thanh toán home credit năm 2024

mẹo hay
Hội nghị truyền hình trực tuyến là gì năm 2024
Hội nghị truyền hình trực tuyến là gì năm 2024

là ai Hỏi Đáp Là gì
Đi phượng hoàng cổ trấn đến sân bay nào năm 2024
Đi phượng hoàng cổ trấn đến sân bay nào năm 2024

mẹo hay
Bài 22 sách bài tập toán 9 tập 1 hình năm 2024
Bài 22 sách bài tập toán 9 tập 1 hình năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Sách
Mức giá trung bình của ngành tiếng anh năm 2024
Mức giá trung bình của ngành tiếng anh năm 2024

mẹo hay Học Tốt Tiếng anh Cryto Giá
Làm bài tập dịch sang tiếng anh là gì năm 2024
Làm bài tập dịch sang tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Khỏe Đẹp Bài tập Học Tốt Tiếng anh Ngôn ngữ Dịch
Gà bị đờm nổi mục trên da là bệnh gì năm 2024
Gà bị đờm nổi mục trên da là bệnh gì năm 2024

là ai
Lịch băn pháo hóa đà nẵng ngày 20 tháng 5 năm 2024
Lịch băn pháo hóa đà nẵng ngày 20 tháng 5 năm 2024

mẹo hay
Huyết đo ở 2 tay trung bình bao nhiêu năm 2024
Huyết đo ở 2 tay trung bình bao nhiêu năm 2024

mẹo hay Hỏi Đáp Bao nhiêu

Quảng Cáo

Có thể bạn quan tâm

Quản lý đường đi trong thành phố là gì năm 2024
1 ngày trước . bởi SubstituteManga
Top 5 vi tuong xa thu manh nhat lien quan năm 2024
1 ngày trước . bởi StructuredGoogle
Bài 4 trang 109 ngữ văn 8 tập 1 năm 2024
1 ngày trước . bởi StandardizedDiver
Giải bài tập giáo dục công dân 8 bài 4 năm 2024
1 ngày trước . bởi ThyroidPenguin
Rom quốc tế 5.1.1 cho z1 fix full lỗi năm 2024
1 ngày trước . bởi UndistinguishedEncampment
So sanh tháng trước với tháng này gọi là gì năm 2024
1 ngày trước . bởi Far-reachingMainframe
Ref trong excel có nghĩa là gì năm 2024
1 ngày trước . bởi ConstitutionalBirthplace
Đề kiểm tra toán đại lớp 8 chương 1 năm 2024
1 ngày trước . bởi IndoorAnxiety
Biểu trưng của sea games 22 là con gì năm 2024
1 ngày trước . bởi WaryNeighborhood
Giải đề thi tuyển sinh lớp 10 môn toán 20232023 năm 2024
1 ngày trước . bởi ProfitableThoroughfare

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Văn phòng hà sơn hải vân ở hà nội năm 2024
4 ngày trước . bởi RestoredEmbroidery
Bài tập trắc nghiệm amino axit có đáp án năm 2024
3 ngày trước . bởi EnthusiasticRodeo
Lỗi alt click to define trên photoshop có nghĩa gì năm 2024
1 ngày trước . bởi SurroundingDoorway
Lỗi khi cài win 7 require cd từ usb năm 2024
10 giờ trước . bởi ImprisonedMishap
Tuổi tân mùi hợp tuổi nào mở hàng khai trương năm 2024
1 tuần trước . bởi PatrioticBonding
Bài văn viết về sở thích bằng tiếng anh năm 2024
1 tuần trước . bởi SucceedingSubcommittee
Bê tông thương phẩm mác 250 là gì năm 2024
1 tuần trước . bởi AttentivePrivacy
Thư giãn đầu óc tiếng anh là gì năm 2024
4 ngày trước . bởi DivingTwenties
Đi xe grab 4 chỗ trung bình giá bao nhiêu năm 2024
3 ngày trước . bởi MistyEmancipation
Bài tập powerpoint cơ bản cho tiểu học năm 2024
12 giờ trước . bởi OmnipresentAltercation

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 boxhoidap.com Inc.