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

Vì canvas HTML là một công cụ đồ họa nên hiển nhiên nó cho phép chúng ta vẽ các hình. Chúng ta có thể vẽ các hình dạng mới bằng cách sử dụng một số chức năng khác nhau có sẵn để sử dụng qua

 Nội dung chính Show
 
Tạo hình chữ nhật và hình vuông bằng HTML Canvas
Xóa chức năng hình chữ nhật
Sử dụng rect() để tạo hình chữ nhật
Sử dụng fillRect() để tạo hình chữ nhật
Sử dụng strokeRect() để tạo hình chữ nhật
Tạo vòng kết nối trong HTML Canvas
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);
23
Tạo hình bán nguyệt bằng HTML Canvas
Tạo hình bầu dục bằng HTML Canvas



     (adsbygoogle = window.adsbygoogle || []).push({});

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);
37
Tạo hình tam giác bằng HTML Canvas
Sự kết luận
Thẻ nào có thể tạo bản vẽ trong HTML5?
Được sử dụng trong HTML5 để vẽ ở dạng 2D?
Đối tượng HTML5 tích hợp nào được sử dụng để vẽ trên canvas?
 
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

6 mà chúng ta đã đặt. Nếu bạn là người mới sử dụng HTML canvas, hãy bắt đầu với bài viết giới thiệu của chúng tôi

Trong hướng dẫn này, chúng tôi sẽ giới thiệu cách tạo một số hình dạng cơ bản nhất bằng canvas HTML - hình vuông, hình chữ nhật, hình tròn và hình tam giác

Tạo hình chữ nhật và hình vuông bằng HTML Canvas

Dễ dàng tạo hình vuông và hình chữ nhật trong HTML5 Canvas. Có một số hàm

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

7 khác nhau mà chúng ta có thể sử dụng để tạo

• rect(x, y, width, height) - phác thảo vị trí của một hình chữ nhật hoặc hình vuông, nhưng không lấp đầy nó
• fillRect(x, y, width, height) - tạo một hình chữ nhật và ngay lập tức lấp đầy nó
• strokeRect(x, y, width, height) - tạo một hình chữ nhật và ngay lập tức phác thảo nó bằng một nét vẽ

Như bạn có thể thấy, tất cả các chức năng này đều tuân theo cùng một định dạng - chúng có tọa độ

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

0 và

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

1 cho nơi chúng bắt đầu, cũng như chiều rộng và chiều cao trong canvas

Hãy xem xét một số ví dụ trong mã

Xóa chức năng hình chữ nhật

Nếu bạn muốn tìm hiểu về

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

2, hãy đọc hướng dẫn của chúng tôi về điều đó tại đây

Sử dụng rect() để tạo hình chữ nhật

Nếu chúng ta muốn sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

3 để tạo một hình chữ nhật, sau đó tô màu và tạo nét cho nó, chúng ta cần xác định

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

4 và

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

5. Ví dụ: mã bên dưới sẽ tạo một hình chữ nhật bắt đầu từ

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

6, có kích thước

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

7, với nền #b668ff và nét viền màu trắng rộng 5px

________số 8

Thử nghiệm

Sử dụng fillRect() để tạo hình chữ nhật

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

8 cho phép chúng ta tạo một hình chữ nhật và tự động tô nó bằng một màu cụ thể. Điều đó có nghĩa là chúng ta không phải sử dụng riêng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

9

Ví dụ: phần sau sẽ lấp đầy một hình chữ nhật có cùng kích thước như trước, với nền #b668ff

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

Thử nghiệm

Sử dụng strokeRect() để tạo hình chữ nhật

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

20 có định dạng tương tự, chỉ có điều nó sẽ tạo ra một hình chữ nhật được vuốt tự động. Ví dụ: mã bên dưới sẽ tạo một hình chữ nhật có cùng kích thước và vị trí như trước, với đường viền/nét #b668ff rộng 5px

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

2

Thử nghiệm

Tạo vòng kết nối trong HTML Canvas

Cách dễ nhất để tạo vòng kết nối trong HTML Canvas là sử dụng hàm

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

21. Tuy nhiên, một cung không nhất thiết phải vẽ một hình tròn đầy đủ - nó chỉ có thể vẽ một phần của hình tròn bằng cách thay đổi góc bắt đầu và góc kết thúc. Hãy xem cú pháp của

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

22 và cách tạo vòng tròn

let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = '#b668ff'; ctx.fillRect(10, 10, 100, 150); 23

• x - đề cập đến tọa độ x của tâm vòng tròn
• y - đề cập đến tọa độ y của tâm vòng tròn
• bán kính - bán kính của cung chúng ta đang vẽ
• startAngle - góc mà cung bắt đầu (tính bằng radian)
• endAngle - góc mà cung kết thúc (tính bằng radian)
• ngược chiều kim đồng hồ - góc có đi ngược chiều kim đồng hồ hay không (mặc định là

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.fillStyle = '#b668ff';
  ctx.fillRect(10, 10, 100, 150);
  

  24, có thể đặt thành

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.fillStyle = '#b668ff';
  ctx.fillRect(10, 10, 100, 150);
  

  25)

Nếu chúng tôi đặt startAngle của mình thành 0 Radian, nó sẽ bắt đầu ở tâm bên phải của vòng tròn. Một vòng tròn có đường kính

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

26 radian. Nếu chúng tôi muốn vẽ một vòng tròn đầy đủ, thì

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

27 của chúng tôi là 0 và

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

28 của chúng tôi là 2π

Chúng tôi có thể đại diện cho mã này bằng cách sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

29. Đây là mã của chúng ta để vẽ một hình tròn, với nét rộng 4px trong #b668ff, với bán kính 90px, tâm của nó là (100, 100)

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

3

Thử nghiệm

Tạo hình bán nguyệt bằng HTML Canvas

Vì chúng ta có thể sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

21 để vẽ hình tròn và điều chỉnh

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

28 nên chúng ta cũng có thể sử dụng nó để vẽ hình bán nguyệt. Vì một vòng tròn đầy đủ có đường kính ________ 126, một hình bán nguyệt chỉ có đường kính ________ 233 radian. Bước bổ sung duy nhất chúng ta phải làm ở đây là vẽ một đường từ cuối hình bán nguyệt của chúng ta, quay lại từ đầu một lần nữa

Vì chúng ta sắp kết thúc tại (10, 100) - vì bán kính của chúng ta là 90px, nên chúng ta vẽ một đường bằng hàm

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

34 quay lại điểm bắt đầu, đó là (190, 100)

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

9

Thử nghiệm

Chúng ta có thể lật hình bán nguyệt của mình bằng cách thay đổi tùy chọn ngược chiều kim đồng hồ thành true

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

0

Tạo hình bầu dục bằng HTML Canvas

Chúng ta có thể vẽ một hình bầu dục trong canvas HTML5 bằng cách sử dụng hàm

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

35. Nó hoạt động theo cách rất giống với

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

36, ngoại trừ chúng tôi có hai tùy chọn bán kính

(adsbygoogle = window.adsbygoogle || []).push({}); let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); ctx.fillStyle = '#b668ff'; ctx.fillRect(10, 10, 100, 150); 37

• x - đề cập đến tọa độ x của tâm vòng tròn
• y - đề cập đến tọa độ y của tâm vòng tròn
• bán kínhX - bán kính dọc theo trục X của cung chúng ta đang vẽ
• bán kínhY - bán kính dọc theo trục Y của cung chúng ta đang vẽ
• xoay - chúng ta muốn xoay hình elip bao nhiêu, tính bằng radian
• startAngle - góc mà cung bắt đầu (tính bằng radian)
• endAngle - góc mà cung kết thúc (tính bằng radian)
• ngược chiều kim đồng hồ - góc có đi ngược chiều kim đồng hồ hay không (mặc định là

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.fillStyle = '#b668ff';
  ctx.fillRect(10, 10, 100, 150);
  

  24, có thể đặt thành

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.fillStyle = '#b668ff';
  ctx.fillRect(10, 10, 100, 150);
  

  25)

Đây là một ví dụ, sử dụng các khái niệm giống như chúng ta đã làm trước đây với

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

36

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

7

Thử nghiệm

Tạo hình tam giác bằng HTML Canvas

Không có chức năng tam giác tích hợp sẵn trong Javascript, vì vậy chúng tôi phải sử dụng chức năng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

34 và

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

92 để thay thế. Tất cả những chức năng này làm là vẽ các đường trên bối cảnh, đến các điểm cụ thể

Chúng tôi sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

92 để xác định vị trí bắt đầu của tam giác của chúng tôi, sau đó vẽ các đường thích hợp để vẽ hình dạng của tam giác mà chúng tôi muốn. Đây là một ví dụ trong đó chúng ta vẽ một hình tam giác và tô nó bằng #b668ff

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

1

• Chúng tôi bắt đầu bằng cách sử dụng

  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  
  ctx.fillStyle = '#b668ff';
  ctx.fillRect(10, 10, 100, 150);
  

  92 để xác định điểm bắt đầu của tam giác của chúng tôi
• Sau đó, chúng tôi vẽ một dòng từ (20, 0) đến (40, 30) - i. e. 20px sang phải và 30px xuống từ điểm bắt đầu của chúng tôi
• Vì hình tam giác này sẽ đối xứng, chúng ta vẽ một đường 20px ở bên trái và 30px ở dưới, tôi. e. (0, 30)
• Cuối cùng, chúng tôi kết nối hình dạng của chúng tôi bằng cách vẽ một đường trở lại điểm xuất phát của chúng tôi, đó là (20, 0)
• Sau đó, chúng tôi điền vào nó, và chúng tôi có một hình tam giác

Thử nghiệm

Hàm

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

95 có thể được sử dụng để vẽ nhiều hình dạng phức tạp hơn trong HTML Canvas, không được tích hợp sẵn theo mặc định. Mọi đa giác tùy chỉnh sẽ sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

34, chẳng hạn như Hình lục giác, Hình bát giác hoặc thậm chí là Hình bình hành

Sự kết luận

Trong hướng dẫn này, chúng tôi đã giới thiệu cách tạo một số hình dạng đơn giản trong canvas HTML. hình vuông, hình chữ nhật, hình tròn và hình tam giác. Chúng tôi cũng đã đề cập đến thực tế là có thể sử dụng

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.fillStyle = '#b668ff';
ctx.fillRect(10, 10, 100, 150);

34 để vẽ một đường ở bất kỳ đâu trên canvas của chúng tôi, cho phép chúng tôi tạo các hình phức tạp hơn như hình lục giác và hình bát giác. Tôi hy vọng bạn thích bài viết này

Thẻ nào có thể tạo bản vẽ trong HTML5?

Được sử dụng trong HTML5 để vẽ ở dạng 2D?

Đối tượng HTML5 tích hợp nào được sử dụng để vẽ trên canvas?