canvas 动态填充
时间: 2023-10-15 09:08:33 浏览: 44
要在 Canvas 中进行动态填充,可以使用 CanvasRenderingContext2D 对象的 fillStyle 属性来设置填充样式。可以使用颜色值、渐变对象或图案对象作为填充样式。
以下是使用颜色值进行动态填充的示例:
```html
<canvas id="myCanvas"></canvas>
```
```javascript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let hue = 0;
function draw() {
// 设置填充样式为随机颜色
ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
// 填充矩形
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新颜色值
hue += 1;
// 重复执行
requestAnimationFrame(draw);
}
draw();
```
在上面的示例中,我们定义了一个 `draw` 函数,该函数使用 `hsl` 颜色值设置填充样式,并且每次调用时更新 `hue` 变量的值。然后,我们使用 `requestAnimationFrame` 方法来循环调用该函数,以实现动态填充的效果。
你也可以使用渐变对象或图案对象作为填充样式,这需要使用 CanvasRenderingContext2D 对象的 createLinearGradient、createRadialGradient 或 createPattern 方法来创建相应的对象。具体使用方法可以参考相关文档或示例。