LẬP TRÌNH

Dựng ứng dụng vẽ kỹ thuật
số bằng HTML5 Canvas

Nêu công cụ vẽ và định dạng xuất, nhận về ứng dụng vẽ chạy trên trình duyệt với đầy đủ lớp và hoàn tác.

Dùng để: Dựng một ứng dụng vẽ kỹ thuật số chạy trên trình duyệt, có nhiều công cụ và xuất được ảnh.

Nội dung prompt

VAI TRÒ
Bạn là kỹ sư frontend dựng ứng dụng vẽ bằng HTML5 Canvas, CSS và JavaScript thuần.

NHIỆM VỤ
Viết một ứng dụng vẽ kỹ thuật số chạy trên trình duyệt theo yêu cầu trong phần đầu vào.

ĐẦU VÀO
- Công cụ cần có: [DANH SÁCH CÔNG CỤ, ví dụ cọ, bút chì, tẩy, nhập chữ]
- Định dạng xuất: [PNG / JPG / SVG]
- Có phân lớp hay không: [CÓ / KHÔNG]
- Phím tắt mong muốn: [DANH SÁCH PHÍM TẮT]

QUY TẮC
- Giao diện gọn, thanh công cụ bên trái, bảng màu bên phải, khung vẽ ở giữa.
- Công cụ vẽ gồm cọ, bút chì, hình học cơ bản, nhập chữ và tẩy.
- Bảng màu có danh sách màu vừa dùng và ống hút màu.
- Hỗ trợ phân lớp với độ mờ đục và chế độ hòa trộn nếu được yêu cầu.
- Có hoàn tác và làm lại lưu theo lịch sử thao tác.
- Cho phóng to, thu nhỏ và di chuyển khung nhìn.
- Mã chia rõ phần trạng thái, phần vẽ và phần giao diện, có chú thích.
- Không dùng thư viện ngoài.

KHUÔN ĐẦU RA
Một tệp HTML chạy được, kèm ghi chú ngắn về cách thêm công cụ mới.

Thay nội dung trong dấu [ ] trước khi sử dụng.

Mẹo tinh chỉnh

Ứng dụng vẽ dễ phình mã, nên hãy tách phần xử lý chuột và bàn phím ra khỏi phần vẽ. Với hoàn tác, đừng lưu từng nét liên tục mà gộp theo từng thao tác để tránh nặng bộ nhớ. Nếu cần xuất SVG, yêu cầu lưu các nét thành đường vector riêng thay vì chụp ảnh điểm. Bảng màu nên có vài màu vừa dùng để thao tác nhanh hơn. Cuối cùng, kiểm tra cảm ứng trên màn hình điện thoại nếu người dùng hay vẽ bằng ngón tay.

Prompt khác cùng nhóm

Dựng ứng dụng web tạo avatar cá nhân hóaNêu các phong cách và trường mô tả, nhận về mã ứng dụng web tạo avatar với lưới kết quả và lịch sử lưu trên máy.Xem promptTư vấn di chuyển hệ thống lên AWSMô tả hệ thống hiện tại, nhận về phương án di chuyển lên AWS, điểm cần cân nhắc và thứ tự thực hiện.Xem promptĐóng vai chuyên gia lập trình Swift và iOSNêu đoạn mã và mục tiêu, nhận về hướng dẫn Swift hiện đại, SwiftUI và xử lý bất đồng bộ theo chuẩn của Apple.Xem promptDựng trang HTML hiện lời nhắn khi nhấp chuộtĐiền lời nhắn và tông màu, nhận về một tệp HTML nhẹ, nhấp vào màn hình là hiện thông điệp.Xem promptThiết kế hệ thống nhiều tác nhân AINêu bài toán và các vai trò, nhận về sơ đồ hệ thống nhiều tác nhân, cách nhớ ngữ cảnh và hàng rào an toàn.Xem promptViết Bash script tự động hóa chuẩn chuyên nghiệpMô tả công việc cần tự động, nhận về Bash script có xử lý lỗi, tô màu đầu ra và cờ trợ giúp đầy đủ.Xem promptDựng ứng dụng web nhật ký và phản hồi bản thânMô tả lĩnh vực và giọng phản hồi, nhận về đặc tả ứng dụng web ghi nhật ký ngày và nhận lại lời nhận xét cá nhân.Xem promptThiết kế hệ thống điều hướng cho ứng dụng di độngMô tả ứng dụng và số màn hình, nhận về phương án điều hướng dễ hiểu kèm lý do và các điểm cần kiểm thử.Xem promptĐóng vai kiến trúc sư kỹ thuật di động Native và CloudNêu bài toán ứng dụng di động, nhận về phương án kiến trúc Native kết hợp Cloud chạy tốt cả khi mất mạng.Xem prompt