HTML - Velocity Draw

Giới thiệu về Velocity Draw

Xin chào các nhà phát triển web tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của HTML và một công cụ nhỏ gọn gọi là Velocity Draw. Là giáo viên máy tính gần gũi của bạn, tôi sẽ dẫn đường cho bạn trong chuyến phiêu lưu này, từng bước một. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ đầu!

HTML - Velocity Draw

Velocity Draw là gì?

Velocity Draw là một ứng dụng vẽ canvas HTML5 đơn giản nhưng mạnh mẽ. Nó cho phép người dùng tạo ra các bản vẽ bằng cách di chuyển chuột hoặc ngón tay (trên thiết bị chạm) trên màn hình. Điều thú vị là? Càng di chuyển nhanh,线条就越细!

Thiết lập tệp HTML cơ bản

Hãy bắt đầu bằng cách tạo cấu trúc HTML cơ bản cho ứng dụng Velocity Draw của chúng ta. Mở ứng dụng soạn thảo văn bản yêu thích của bạn và nhập mã sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Velocity Draw</title>
</head>
<body>
    <canvas id="drawingCanvas"></canvas>
    <script>
        // Chúng ta sẽ đặt mã JavaScript của mình ở đây
    </script>
</body>
</html>

Điều này thiết lập một tài liệu HTML cơ bản với một phần tử canvas nơi chúng ta sẽ vẽ, và một thẻ script nơi chúng ta sẽ viết mã JavaScript của mình.

Phép màu JavaScript: Làm cho canvas tương tác

Bây giờ, hãy thêm một chút JavaScript để làm cho canvas của chúng ta tương tác. Chúng ta sẽ chia nhỏ nó thành các phần nhỏ, dễ tiêu hóa:

1. Thiết lập canvas

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Ở đây, chúng ta đang lấy phần tử canvas, lấy ngữ cảnh vẽ 2D của nó (mà chúng ta sẽ sử dụng để vẽ), và đặt kích thước của nó để.fill toàn bộ cửa sổ.

2. Theo dõi di chuyển chuột

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

Chúng ta thiết lập một số biến để theo dõi xem chúng ta có đang vẽ hay không, vị trí cuối cùng của chuột, và tốc độ hiện tại. Sau đó, chúng ta thêm các bộ lắng nghe sự kiện cho các hành động chuột.

3. Triển khai các hàm vẽ

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
    isDrawing = false;
}

function draw(e) {
    if (!isDrawing) return;

    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);

    const currentVelocity = Math.sqrt(
        Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
    );
    velocity = 0.7 * velocity + 0.3 * currentVelocity;

    ctx.lineWidth = Math.max(1, 10 - velocity);
    ctx.stroke();

    [lastX, lastY] = [e.offsetX, e.offsetY];
}

Các hàm này xử lý việc vẽ thực tế. Hàm draw là nơi xảy ra phép màu - nó tính toán tốc độ dựa trên khoảng cách mà chuột đã di chuyển và điều chỉnh độ rộng của线条 tương ứng.

Kết hợp tất cả lại với nhau

Bây giờ chúng ta có tất cả các mảnh, hãy kết hợp chúng vào tệp HTML của chúng ta:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Velocity Draw</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="drawingCanvas"></canvas>
    <script>
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let velocity = 0;

        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

        function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

        function stopDrawing() {
            isDrawing = false;
        }

        function draw(e) {
            if (!isDrawing) return;

            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);

            const currentVelocity = Math.sqrt(
                Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
            );
            velocity = 0.7 * velocity + 0.3 * currentVelocity;

            ctx.lineWidth = Math.max(1, 10 - velocity);
            ctx.stroke();

            [lastX, lastY] = [e.offsetX, e.offsetY];
        }
    </script>
</body>
</html>

Cách nó hoạt động

Khi bạn nhấn nút chuột, startDrawing được gọi, đặt isDrawing thành true và ghi lại vị trí bắt đầu.
Khi bạn di chuyển chuột, draw được gọi liên tục. Nó vẽ một线条 từ vị trí cuối cùng đến vị trí hiện tại.
Tốc độ được tính toán dựa trên khoảng cách mà chuột đã di chuyển kể từ lần gọi cuối cùng.
Độ rộng của线条 được đặt ngược proportional với tốc độ - di chuyển nhanh hơn sẽ tạo ra线条 mỏng hơn.
Khi bạn释放鼠标按钮 hoặc di chuyển ra khỏi canvas, stopDrawing được gọi, dừng quá trình vẽ.

Kết luận

Chúc mừng! Bạn vừa tạo ra ứng dụng Velocity Draw của riêng mình. Có phải nó tuyệt vời như thế nào khi chỉ cần một vài dòng mã có thể tạo ra một thứ tương tác và thú vị như vậy không? Khi bạn chơi với công cụ vẽ mới của mình, hãy nghĩ về cách bạn có thể mở rộng nó. Bạn có thể thêm các tùy chọn màu sắc không? Còn các phong cách cọ khác nhau?

Nhớ rằng, chìa khóa để trở thành một nhà lập trình giỏi là thử nghiệm và thực hành. Vậy đừng ngừng ở đây - tiếp tục khám phá, tiếp tục mã hóa, và quan trọng nhất, đừng bao giờ ngừng vui vẻ!

Phương pháp	Mô tả
`getElementById`	Lấy một phần tử từ DOM theo ID
`getContext`	Lấy ngữ cảnh vẽ cho canvas
`addEventListener`	Thêm một bộ lắng nghe sự kiện cho một phần tử
`beginPath`	Bắt đầu một đường mới trong canvas
`moveTo`	Di chuyển con trỏ vẽ đến một điểm مشخص
`lineTo`	Vẽ một线条 từ điểm hiện tại đến một điểm مشخص
`stroke`	Vẽ đường path với phong cách stroke hiện tại
`Math.sqrt`	Tính toán căn bậc hai của một số
`Math.pow`	Lifting a number to a specified power
`Math.max`	Trả về số lớn nhất trong một hoặc nhiều số

Chúc mừng, các phù thủy mã hóa tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - Bàn trình chiếu Web

Hướng Dẫn Tiếp Theo:

HTML - Mã QR