Canvas—图形画刷

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);
}

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章