Video: 05 - Vẽ đường cong và hình tròn trên HTML5 Canvas 2025
Thẻ sẽ thiết lập một phần của màn hình để được sử dụng làm khung cảnh cho đồ hoạ được chương trình kiểm soát. Mã JavaScript thực hiện tất cả các bản vẽ và thao tác của hình ảnh. Đoạn mã sau thiết lập một phần tử canvas và cung cấp một nút.
Ví dụ này yêu cầu hỗ trợ vải nền HTML5 Nhấp vào tôi để xem một bản vẽ
Các yếu tố canvas ít khi làm riêng, bạn phải sử dụng JavaScript để trích xuất ngữ cảnh vẽ (một yếu tố đặc biệt có thể được vẽ trên) và sử dụng các phương thức của đối tượng ngữ cảnh đó để tạo đồ hoạ động. Ví dụ: để bật chức năng draw () khi người dùng nhấp vào nút, sử dụng mã này:
chức năng vẽ () {var myCanvas = tài liệu. getElementById ("myCanvas"); var context = myCanvas. getContext ("2d"); bối cảnh. fillStyle = "màu xanh"; bối cảnh. strokeStyle = "đỏ"; vòng tròn (ngữ cảnh, 1, 1, 1); for (i = 1; i <= 200; i + = 2) {khoanh tròn (ngữ cảnh, i, i, i, "blue"); vòng tròn (ngữ cảnh, 300-i, 200-i, i, "đỏ"); vòng tròn (ngữ cảnh, 300-i, i, i, "xanh"); hình tròn (ngữ cảnh, x, y, bán kính, màu sắc) (ngữ cảnh, x, y, bán kính, màu). strokeStyle = màu sắc; bối cảnh. beginPath (); bối cảnh. arc (x, y, bán kính, 0, toán học PI * 2, true); bối cảnh. stroke ();} // end circle
Đầu ra của mã vẽ vẽ này sẽ như sau:
Hầu hết các trình duyệt hiện đại đều hỗ trợ một số hình thức của nhãn vải canvas. Hiện tại, chỉ có một ngữ cảnh vẽ 2D có sẵn, nhưng cuối cùng bạn sẽ có thể tạo đồ họa 3D trực tiếp trong trình duyệt.
Đối tượng ngữ cảnh kiểm soát tất cả các chức năng vẽ thực tế. Một vài trong số các phương pháp chính của đối tượng ngữ cảnh bao gồm:
: Vẽ một đường cung (phần của một vòng tròn) như một phần của đường dẫn. Vòng cung được định nghĩa như một vòng tròn, với một trung tâm và bán kính, mà còn với góc bắt đầu và kết thúc. Nếu những góc độ mô tả một vòng tròn đầy đủ (0 đến 2 lần pi radian), lệnh arc sẽ vẽ một vòng tròn đầy đủ. beginPath ()
: Bắt đầu định nghĩa một con đường. Thông thường, một đường dẫn được định nghĩa bởi một lệnh moveTo, theo sau là một loạt lệnh lineTo, và kết thúc bằng một cú đánh, closePath, hoặc fill. closePath ()
: Kết nối điểm cuối cùng của một đường dẫn (vẽ bằng các lệnh moveTo và lineTo) vào đầu tiên, tạo một hình dạng đóng có thể được điền. drawImage ()
: Cho phép bạn vẽ một hình ảnh (từ một tệp hình ảnh bên ngoài) trên vải. Nhiều triển khai cho phép thao tác ở mức độ pixel, cho phép bạn áp dụng các bộ lọc và biến đổi tuỳ chỉnh cho hình ảnh của mình, điều này cho phép kiểm soát xa hơn thẻ điển hình.
: Lệnh này (và các biến thể của nó, chẳng hạn như fillRect) cho phép bạn áp dụng kiểu đổ đầy hiện tại cho các phần tử được vẽ trên màn hình. fillRect ()
: Tạo một hình chữ nhật có kích thước và vị trí xác định, điền vào với kiểu điền hiện tại. fillStyle ()
: Cho phép bạn chỉ định kiểu điền. Đây có thể là một giá trị màu chuẩn hoặc một gradient được xác định trước. lineTo ()
: Cùng với lệnh moveTo, điều này cho phép bạn xây dựng một đường dẫn trên màn hình. Lệnh lineTo lấy một điểm như đầu vào và rút ra từ một điểm được xác định trước đó đến điểm hiện tại. Lưu ý rằng đường dẫn không được hiển thị cho đến khi ứng dụng của chức năng đột qu.. lineWidth ()
: Điều này xác định chiều rộng của dòng được vẽ bởi một lệnh đột qu.. moveTo
: Được sử dụng trong định nghĩa đường dẫn để chỉ ra điểm xuất phát của một con đường. stroke ()
: Vẽ đường đi được xác định hiện tại. Lưu ý rằng các đường dẫn không phải là rút ra ngay lập tức; lệnh đột qu actually thực sự rút ra các đường dẫn trên màn hình. strokeRect ()
: Vẽ một hình chữ nhật chưa điền. strokeStyle ()
: Xác định kiểu của nét vẽ tiếp theo được vẽ. Hầu hết các ngữ cảnh vẽ hỗ trợ các kiểu đột qu d rải rác và dashed, nhưng nhiều hơn dự kiến. văn bản
: Một số hiện thực của thẻ canvas cho phép thao tác văn bản. Hỗ trợ này không đồng đều, nhưng nó có thể trở nên phổ biến trong các triển khai trong tương lai. Thẻ vải canvas là một trong những tính năng mới quan trọng nhất của HTML5, vì nó cho phép điều khiển gần như không giới hạn giao diện trực quan. Các nhà phát triển trò chơi đã bắt đầu tạo ra các trò chơi trực tuyến bằng cách sử dụng khung làm việc và nó đã trở thành cơ sở của một số thí nghiệm giao diện người dùng sáng tạo (đặc biệt là Google maps).
