PaintWorkletGlobalScope: phương thức registerPaint()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Phương thức registerPaint() của giao diện PaintWorkletGlobalScope đăng ký một lớp để tạo ảnh lập trình nơi một thuộc tính CSS mong đợi một tệp.
Cú pháp
js
registerPaint(name, classRef)
Tham số
Giá trị trả về
Không có (undefined).
Ngoại lệ
TypeError-
Được ném khi một trong các đối số không hợp lệ hoặc bị thiếu.
InvalidModificationErrorDOMException-
Được ném khi một worklet đã tồn tại với tên được chỉ định.
Ví dụ
js
/* checkboardWorklet.js */
class CheckerboardPainter {
paint(ctx, geom, properties) {
const colors = ["red", "green", "blue"];
const size = 32;
for (let y = 0; y < geom.height / size; y++) {
for (let x = 0; x < geom.width / size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
// Đăng ký lớp của chúng ta dưới một tên cụ thể
registerPaint("checkerboard", CheckerboardPainter);
js
CSS.paintWorklet.addModule("checkboardWorklet.js");
css
li {
background-image: paint(checkerboard);
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Painting API Level 1 # dom-paintworkletglobalscope-registerpaint |