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
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ôiTrong 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 canvasHã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 đâySử 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 5pxThử 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];
9Ví 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 5pxlet canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
2Thử 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ònlet canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
23
let canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
- 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à
24, có thể đặt thànhlet canvas = document.getElementById['canvas']; let ctx = canvas.getContext['2d']; ctx.fillStyle = '#b668ff'; ctx.fillRect[10, 10, 100, 150];
25]let canvas = document.getElementById['canvas']; let ctx = canvas.getContext['2d']; ctx.fillStyle = '#b668ff'; ctx.fillRect[10, 10, 100, 150];
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ì 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];
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];
3Thử 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ữaVì 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];
9Thử 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];
0Tạ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
let canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
37
let canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
- 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à
24, có thể đặt thànhlet canvas = document.getElementById['canvas']; let ctx = canvas.getContext['2d']; ctx.fillStyle = '#b668ff'; ctx.fillRect[10, 10, 100, 150];
25]let canvas = document.getElementById['canvas']; let ctx = canvas.getContext['2d']; ctx.fillStyle = '#b668ff'; ctx.fillRect[10, 10, 100, 150];
Đâ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];
36let canvas = document.getElementById['canvas'];
let ctx = canvas.getContext['2d'];
ctx.fillStyle = '#b668ff';
ctx.fillRect[10, 10, 100, 150];
7Thử 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 #b668fflet 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
92 để xác định điểm bắt đầu của tam giác của chúng tôilet canvas = document.getElementById['canvas']; let ctx = canvas.getContext['2d']; ctx.fillStyle = '#b668ff'; ctx.fillRect[10, 10, 100, 150];
- 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ànhSự 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