Lập trình tạo hình ảnh bằng API CSS Paint

Tạo hình ảnh bằng CSS Paint API là một tính năng hiện đại của nền tảng web, giúp tạo ra hình ảnh trong JavaScript và hiển thị trên trang web khi được tham chiếu bởi CSS. Bạn có thể tạo hình ảnh sử dụng Canvas API, một API mà có lẽ bạn đã quen thuộc.

Flows Trước và Sau CSS Paint

Trước đây, bạn có thể tham chiếu URL hình ảnh trong CSS. Ví dụ như:

.logo {
    background-image: url('logo.png');
}

Tuy nhiên, với CSS Paint API, bạn có thể làm như sau:

.logo {
    /* Hình ảnh dự phòng */
    background-image: url('logo.png');    
    /* CSS Paint API */
    background-image: paint(logo);
}

Sử Dụng CSS Paint API

CSS Paint API cho phép bạn sử dụng hàm paint() ở bất kỳ nơi nào bạn mong đợi một hình ảnh CSS.

CSS Paint API Như Một Đặc Tả

Hàm paint bạn thấy trong ví dụ mã sau là một phần của CSS Paint API, nằm trong dự án Houdini - một bộ API trình duyệt mới. Hiện tại, Houdini có hỗ trợ trình duyệt hạn chế và CSS Paint API hiện có sẵn trên Chrome và các trình duyệt dựa trên Chromium.

Worklets

Mã JavaScript bạn viết để tạo hình ảnh gọi là Paint Worklet. Paint Worklet có một số hạn chế quan trọng như:

• Không có truy cập mạng
• Không có truy cập lưu trữ
• Tuổi thọ của script không được đảm bảo; có thể bị kết thúc bất kỳ lúc nào
• Không có các hàm hẹn giờ như requestAnimationFrame hoặc setInterval

Cách Thức Đăng Ký Paint Worklet

class MyWorklet {
    paint(ctx) {
        ctx.fillStyle = 'green';
        ctx.fillRect(0, 0, 20, 20);
    }
}

registerPaint('my-paint-worklet', MyWorklet);

Phương Thức Paint

Phương thức paint nhận ngữ cảnh canvas là đối số đầu tiên. Nếu bạn muốn khám phá các đối số khác mà phương thức paint nhận, bạn có thể khám phá chúng bằng cách ghi chúng vào console:

class MyWorklet {
    paint(...args) {
        console.log(args);
    }
}

Các Thuộc Tính Đầu Vào

Một cách tiện lợi để giải thích tính năng thuộc tính đầu vào của Paint API là thông qua một ví dụ mã. Lưu ý định nghĩa lớp Paint Worklet sau:

class MyWorklet {
    static get inputProperties() {
        return ['--custom-property-1', '--custom-property-2'];
    }

    paint(ctx, geometry, inputProperties) {
        const customProp1 = inputProperties.get('--custom-property-1');
        const customProp2 = inputProperties.get('--custom-property-2');
        console.log(customProp1.toString(), customProp2.toString());
        ctx.fillStyle = 'green';
        ctx.fillRect(0, 0, 20, 20);
    }
}

Hỗ Trợ Trình Duyệt và Kết Luận

CSS Paint API hiện có hỗ trợ trên Chrome và các trình duyệt dựa trên Chromium. Việc tạo hình ảnh độc lập với chức năng trang web cơ bản giúp cải thiện trải nghiệm người dùng với các hình ảnh tạo ra từ Paint Worklet chỉ khi hỗ trợ có sẵn.

Với các khái niệm và mã code này, bạn có thể bắt đầu tạo hình ảnh động và tương tác trên trang web của mình bằng CSS Paint API.