Canvas—图形画刷

最新推荐文章于 2024-05-28 17:11:01 发布

Meskjei

最新推荐文章于 2024-05-28 17:11:01 发布

阅读量429

点赞数

分类专栏：前端文章标签： Canvas 图形画刷 createPattern

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/94594841

版权

前端专栏收录该内容

70 篇文章

订阅专栏

本文介绍如何利用Canvas API创建画刷模式，并探讨不同类型的平铺方式，包括'no-repeat'、'repeat'、'repeat-x'和'repeat-y'，以实现自定义填充效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

createPattern可以创建一个画刷模式，进而可以设置到fillStyle里，进行画刷的填充。

函数原型：ctx.createPattern(image, type)
type取值：
- ‘no-repeat’：不平铺
- ‘repeat’：横方向平铺
- ‘repeat-x’：纵方向平铺
- ‘repeat-y’：全方向平铺

const canvas=document.getElementById("canvas");
const ctx = canvas.getContext('2d');
let img = new Image();
img.src = './logo.png';
img.onload = function(){
let pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}