Bắt đầu với HTML Canvas

Sep 12, 2025

Cách

HTML & LT; Canvas & GT; Yếu tố là một giải pháp mạnh mẽ để tạo đồ họa dựa trên pixel trên web bằng cách sử dụng JavaScript. và sẽ cho phép bạn tạo ra một số hiệu ứng đáng chú ý với một chút thực hành.

Trong hướng dẫn này, chúng ta sẽ xem xét việc tạo một đối tượng Canvas, vẽ hình ảnh đơn giản trên đó và hoạt hình các hình ảnh đó.

01. Tạo một trang

Canvas về cơ bản là một yếu tố HTML mà bạn đặt trên trang, tỷ lệ để bao gồm khu vực bạn muốn và sau đó có thể vẽ. Để bắt đầu, chúng ta cần tạo một trang đơn giản với một đối tượng Canvas.

 & lt;! DocType HTML & GT;
& lt; html & gt;
  & lt; Head & GT;
  & lt; meta charset = 'utf-8' / & gt;
  & lt; Tiêu đề & GT; HTML Canvas Demo & LT; / Tiêu đề & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; canvas id = "html-canvas" & gt;
  & lt; / body & gt;
& lt; / html & gt;

02. Tỷ lệ vải

Để cho chúng tôi nhiều không gian để chơi, chúng tôi muốn vải của chúng tôi lấp đầy toàn bộ màn hình. Chúng tôi cũng sẽ cung cấp cho nó một nền đen để bạn biết nó chắc chắn ở đó. Điều này thực sự có thể là một chút khó khăn để làm mà không kết thúc với các thanh cuộn hoặc không gian màu trắng. CSS dưới đây nên chăm sóc nó.

 Canvas {
  Chiều cao: 100vh;
  Chiều rộng: 100VW;
  Vị trí: Tuyệt đối;
  Màu nền: # 000000;
Không thể
  Biên độ: 0;
  Đệm: 0;
}

03. Khởi tạo Canvas để sử dụng

Tiếp theo, chúng ta cần thêm một số JavaScript để thiết lập khung vẽ sẵn sàng để sử dụng. Chúng tôi sẽ loại bỏ nó khỏi sự kiện DOMContentLoaded để đảm bảo tập lệnh không cố chạy trước khi thành phần canvas đã sẵn sàng. Chúng tôi cũng sẽ đặt nó giải quyết Canvas để khớp với khu vực mà nó bao gồm - nếu không, khung vẽ sẽ mở rộng mà không tăng độ phân giải, dẫn đến đồ họa mờ hoặc pixellated.

 tài liệu.addeventlistener ("domcontentLoaded", hàm () {
  var canvas = document.getelementById ("HTML-canvas");
  var circles = [];
  var bán kính = 50;
  Canvas.width = canvas.clientwidth;
  Canvas.Height = Canvas.ClientHeight;
  var bối cảnh = canvas.getContext ("2d");
}, sai);

04. Vẽ một hình dạng

Bạn sẽ nhận thấy rằng trong bước cuối cùng, chúng tôi đã nếm một thứ gọi là 'bối cảnh'. Đây là cách vẽ trên vải xảy ra. Thật dễ dàng nhất để nghĩ về bối cảnh như một cây cọ vẽ mà chúng ta có thể sử dụng để vẽ các dòng khác nhau, cung và hình cơ bản.

Những gì chúng ta có thể làm bây giờ là đặt bối cảnh của chúng tôi để sử dụng bằng cách viết một hàm kéo dài sẽ tạo ra một vòng cung 360 độ - đó là một vòng tròn. Chúng tôi thực hiện việc này bằng cách kể bối cảnh để xác định một vòng cung, đặt các kiểu cho viền và điền, sau đó tăng các hàm Fill () và Stroke () để thực sự vẽ hình (đột quỵ vẽ đường viền).

 Chức năng Drawcircle (X, Y, RADIUS, Border, Border_Colour, Fill_Colour)
  Đồn là
  bối cảnh.BeginPath ();
  bối cảnh.ARc (x, y, bán kính, 0,2 * math.pi);
  bối cảnh.strokestyle = Border_Colour;
  bối cảnh.fillstyle = fill_colour;
  bối cảnh.lineWidth = Border;
  bối cảnh.closepath ();
  bối cảnh.fill ();
  bối cảnh.stroke ();
  }

05. Tạo nhiều vòng tròn

Tuyệt quá. Chúng tôi có một chức năng có thể vẽ vòng tròn. Bây giờ chúng ta cần một cái gì đó để vẽ. Hãy mở rộng mã từ bước 3 để tạo một mảng mô tả các đối tượng vòng tròn. Nó sẽ lưu trữ các khớp nối X và Y của mỗi vòng tròn, màu sắc và giá trị hướng.

Chúng tôi tạo cấu trúc mảng này thay vì chỉ vẽ các vòng tròn ngay lập tức vì nó sẽ cho phép chúng tôi tạo động các vòng kết nối bằng cách vẽ lại nội dung của mảng sau này.

 cho (var i = 0; i & lt; 20; i ++) {
  var x = radius + (math.random () * (canvas.width - (2 * bán kính)));
  var y = radius + (math.random () * (canvas.height - (2 * bán kính));
  var Color = RandoleColour ();
  var hướng = math.random () * 2.0 * math.pi;
  vòng tròn.Push ({x: x, y: y, màu sắc: màu sắc, hướng: hướng});
  vẽ tranh(); }

06. Ngẫu nhiên màu sắc

Trong bước cuối cùng, chúng tôi đã sử dụng một vài chức năng mới chưa được xác định. Hãy bắt đầu với RandomColour (). Đây sẽ là một chức năng tiện ích trả về một chuỗi thập lục phân ngẫu nhiên đại diện cho một màu. Nó khá đơn giản để thực hiện.

 Chức năng RandomColour () {
  var chars = '0123456789abcdef';
  var Color = '#';
  cho (var i = 0; i & lt; 6; i ++) {
  màu + = chars [math.loor (math.random () * 16)];
  Không thể
  trở lại màu sắc; }

07. Vẽ đồ họa trên trang

Bây giờ chúng tôi đã sẵn sàng để mang mọi thứ lại với nhau bằng cách thực hiện chức năng Draw (). Điều này sẽ làm hai điều chính. Thứ nhất, nó sẽ xóa khung vẽ bằng hàm ClearRect (). Điều này sẽ rất quan trọng khi chúng ta đến để làm động vòng tròn của chúng ta, để tránh vẽ khung mới trên đỉnh cũ. Sau đó, nó sẽ lặp qua mảng mà chúng tôi đã xây dựng và vẽ từng vòng tròn trên khung vẽ liên tiếp bằng chức năng DrawCircle của chúng tôi.

 Chức năng vẽ () {
  bối cảnh.CleaRect (0, 0, canvas.width, canvas.height);
  circle.foreach (chức năng (hình tròn) {
  Drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
    }); }

08. Hoạt hình hình dạng

Nếu bạn dùng thử ngay bây giờ, bạn sẽ thấy một số vòng tròn tĩnh được vẽ trên trang. Nhưng chúng tôi muốn làm động chúng. Để làm điều này, chúng ta cần mở rộng hàm Draw () theo một vài cách. Đầu tiên, chúng ta sẽ sử dụng giá trị vòng tròn. Giá trị chúng tôi đã đẩy vào mảng để tính các thay đổi trong vị trí X và Y cho vòng tròn.

Tiếp theo, chúng tôi sẽ sử dụng hàm tích hợp được gọi là RequestAnimationFrame gọi đệ quy hàm Draw (). RequestAnimationFrame cho phép trình duyệt quyết định khi nào gọi lại chức năng, tránh nhu cầu thực hiện bộ hẹn giờ để tính khi vẽ khung hình tiếp theo.

 Chức năng vẽ () {
  bối cảnh.CleaRect (0, 0, canvas.width, canvas.height);
  circle.foreach (chức năng (hình tròn) {
  Circle.x = Circle.x + Math.cos (Circle.Direction);
  Circle.y = Circle.y + Math.sin (Circle.Direction);
  Drawcircle (Circle.x, Circle.y, Radius, 5, Circle.Colour, Circle.Colour);
  });
  yêu cầu (vẽ);
  }

09. Bounce ở rìa của trang

Có một điều vẫn còn thiếu, mặc dù. Các vòng tròn bây giờ chỉ biến mất ra khỏi mép màn hình. Hãy làm cho họ bật lại. Để thực hiện việc này, chúng tôi sẽ thêm một cuộc gọi vào một hàm mới, Bounce (Circle), trong vòng lặp foreach của hàm Draw ().

Chức năng Bounce sẽ xác định khi một vòng tròn ở cạnh màn hình và điều chỉnh giá trị hướng của nó một cách thích hợp.

 Chức năng Bounce (Circle) {
  if (((Circle.x - Radius) & LT; 0) || ((Circle.y - Radius) & lt; 0) || (((Circle.x + Bán kính) & GT; Canvas.Width) || (vòng tròn. Y + RADIUS) & GT; Canvas.Height)) {
  vòng tròn.direction + = (math.pi / 2);
  Không thể
  if (Circle.Direction & GT; (2 * Math.pi)) {
  vòng tròn.direction - = (2 * math.pi);
  Không thể
}

Bài viết này ban đầu xuất hiện trong Nhà thiết kế web Vấn đề 266. Mua nó ở đây.

Những bài viết liên quan:

Tạo một etch kỹ thuật số một bản phác thảo bằng vải
Tất cả mọi thứ bạn cần biết về Node.js 8 mới
Cách xuất từng hoạt hình hiệu ứng sang HTML5

Bắt đầu với HTML Canvas

01. Tạo một trang

02. Tỷ lệ vải

03. Khởi tạo Canvas để sử dụng

04. Vẽ một hình dạng

05. Tạo nhiều vòng tròn

06. Ngẫu nhiên màu sắc

07. Vẽ đồ họa trên trang

08. Hoạt hình hình dạng

09. Bounce ở rìa của trang

Cách - Các bài báo phổ biến nhất

Cách tinh chỉnh danh mục đầu tư thiết kế của bạn

Thêm bộ lọc SVG bằng CSS

Tạo phối cảnh trong Adobe Illustrator

17 cách để vẽ các sinh vật tốt hơn

Bắt đầu nắm với kỹ thuật vẽ ướt ướt

Xây dựng giao diện Maya tùy chỉnh

Cách xây dựng các thế giới cho điện ảnh

Cách hoàn hảo tóc trong chân dung của bạn

Thể loại