Tạo phác thảo và bản vẽ bằng bảng vẽ đơn giản. Hoàn hảo cho phác thảo nhanh, sơ đồ và động não sáng tạo
Features
- Vẽ tự do: Vẽ tự do bằng chuột hoặc cảm ứng
- Màu sắc và Cọ: Kích thước cọ và lựa chọn màu tùy chỉnh
- Hoàn tác/Làm lại: Hoàn tác lỗi và làm lại hành động
- Lưu dưới dạng Hình ảnh: Xuất bản vẽ dưới dạng hình ảnh PNG hoặc JPG
Usage Guide
- Bước 1: Chọn kích thước cọ và màu sắc.
- Bước 2: Bắt đầu vẽ trên vùng vẽ.
- Bước 3: Lưu hoặc xóa bản vẽ của bạn.
Technical Details
HTML5 Canvas API
Bảng vẽ sử dụng HTML5 Canvas API để hiển thị đồ họa. Canvas cung cấp một bề mặt bitmap để vẽ đồ họa động qua JavaScript. Ngữ cảnh render 2D (getContext('2d')) cung cấp các phương thức để vẽ đường thẳng, hình dạng, văn bản và hình ảnh. Sự kiện chuột/chạm bắt đầu vào của người dùng, Canvas render đường dẫn, và hình ảnh có thể được xuất ra dưới dạng PNG/JPG.
Cơ chế vẽ
Vẽ dựa trên đường dẫn: beginPath() bắt đầu đường dẫn → moveTo() đặt điểm bắt đầu → lineTo() thêm điểm → stroke() hoặc fill() render. Kích thước cọ được kiểm soát bởi lineWidth, màu được đặt bởi strokeStyle, và các đường thẳng mượt mà sử dụng lineCap và lineJoin. Tẩy sử dụng clearRect() hoặc globalCompositeOperation = 'destination-out'.
Xuất và Lưu
Canvas có thể được xuất dưới dạng hình ảnh bằng cách sử dụng toDataURL() hoặc toBlob(). toDataURL('image/png') tạo ra PNG được mã hóa Base64. toBlob() tạo tệp Blob để tải xuống hoặc tải lên. Bản vẽ có thể được lưu dưới dạng PNG (không mất dữ liệu), JPG (nén) hoặc WebP (định dạng hiện đại).
Frequently Asked Questions
- Bảng vẽ hoạt động như thế nào?
- Bảng vẽ sử dụng API Canvas HTML5 để hiển thị đồ họa trong trình duyệt. Nó bắt đầu vào chuột hoặc cảm ứng, vẽ đường dẫn trên Canvas và cập nhật theo thời gian thực. Tất cả bản vẽ được thực hiện cục bộ và không gửi dữ liệu đến máy chủ. Bạn có thể tạo bao nhiêu bản phác thảo, chú thích hoặc sơ đồ tùy thích.
- Làm thế nào để lưu bản vẽ của tôi?
- Để lưu bản vẽ của bạn, nhấp vào nút 'Lưu' hoặc 'Xuất'. Bản vẽ sẽ được tải xuống dưới dạng hình ảnh PNG hoặc JPG. Bạn có thể lưu hình ảnh vào máy tính của mình hoặc chia sẻ trong tài liệu, bản trình bày hoặc mạng xã hội. Một số trình duyệt cũng hỗ trợ sao chép vào clipboard.
- Tôi có thể thay đổi kích thước và màu bút không?
- Có, bạn có thể tùy chỉnh kích thước và màu bút. Sử dụng thanh trượt hoặc đầu vào để điều chỉnh kích thước bút. Nhấp vào bộ chọn màu để chọn màu. Bạn có thể vẽ với nhiều màu để tạo bản phác thảo đầy màu sắc. Một số công cụ cũng cung cấp chức năng tẩy, hoàn tác/làm lại.
- Tôi có thể hoàn tác lỗi không?
- Có, hầu hết các bảng vẽ đều cung cấp chức năng hoàn tác và làm lại. Nhấp vào nút 'Hoàn tác' hoặc nhấn Ctrl+Z (Windows) / Cmd+Z (Mac). 'Làm lại' khôi phục hành động đã hoàn tác. Nút 'Xóa' hoặc 'Đặt lại' xóa toàn bộ Canvas.
- Tôi có thể sử dụng bảng vẽ ở đâu?
- Trường hợp sử dụng: Bản phác thảo nhanh (bắt giữ ý tưởng, khái niệm, hình vẽ nguệch ngoạc), Sơ đồ (sơ đồ luồng, sơ đồ tư duy, khung dây), Chú thích (đánh dấu ảnh chụp màn hình hoặc hình ảnh), Động não (ý tưởng trực quan), Giáo dục (vẽ trong lớp học trực tuyến), Chữ ký (tạo chữ ký kỹ thuật số), Ghi chú (ghi chú viết tay). Hoàn hảo cho giao tiếp trực quan nhanh.
Related Documentation
- MDN - Canvas API - Tài liệu tham khảo đầy đủ về HTML5 Canvas API
- Hướng dẫn Canvas - Hướng dẫn từng bước để vẽ bằng Canvas
- Ngữ cảnh Render 2D Canvas - Các phương thức và thuộc tính render đồ họa 2D
- Thực hành Tốt nhất Canvas - Mẹo hiệu suất và tối ưu hóa Canvas
- Kỹ thuật Vẽ Kỹ thuật số - Kỹ thuật nghệ thuật kỹ thuật số và phác thảo