草案
此页面不完整。
PaintWorklet.registerPaint()
方法在
PaintWorklet
interface registers a class programmatically generate an image where a CSS property expects a file.
registerPaint(name, class);
The name of the worklet class to register.
A reference to the class that implements the worklet.
Thrown when one of the arguments is invalid or missing.
Thrown when the a worklet already exists with the specified name.
The following shows registering an example worklet module. This should be in a separate js file. Note that
registerPaint()
is called without a reference to
PaintWorklet
. The file itself is loaded through
CSS.paintWorklet.addModule()
(documented here on the parent class of PaintWorklet, at
Worklet.addModule()
.
/* checkboardWorklet.js */
class CheckerboardPainter {
paint(ctx, geom, properties) {
// Use `ctx` as if it was a normal canvas
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();
}
}
}
}
// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
The first step in using a paintworket is defining the paint worklet using the
registerPaint()
function, as done above. To use it, you register it with the
CSS.paintWorklet.addModule()
方法：
<script>
CSS.paintWorklet.addModule('checkboardWorklet.js');
</script>
You can then use the
CSS function in your CSS anywhere an
paint()
value is valid.
<image>
li {
background-image: paint(checkerboard);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Painting API Level 1
The definition of 'PaintWorklet.registerPaint' in that specification. |
工作草案 | 初始定义。 |
No compatibility data found. Please contribute data for "api.PaintWorklet.registerPaint" (depth: 1) to the MDN 兼容性数据存储库 .
PaintWorklet
devicePixelRatio
devicePixelRatio
devicePixelRatio
registerPaint