美文网首页
canvas图像填充createPattern

canvas图像填充createPattern

作者: infi_ | 来源:发表于2017-12-29 15:33 被阅读0次
var canvas_2=document.getElementById("canvas_2");
var can2_context=canvas_2.getContext("2d");
var img=new Image();
img.src='./images/hover2.png'

function fillimage(){
    var pattern=can2_context.createPattern(img,'no-repeat')
    can2_context.fillStyle=pattern;
    can2_context.fillRect(0,0,canvas_2.width,canvas_2.height)
    

}
img.onload=function(e){
  fillimage()
}

createPattern官方解释:创建一个可以用来在canvas之中对图形和文本进行描边与填充的图案。该方法的第一个参数指定了图案所用图像,它可以是images元素,canvas元素或者video元素.第2个参数告诉浏览器,对图形进行扫描或填充时,应该如何重复该图案,这个参数的有效值是repeat,repeat-x,repeat-y,no-repeat

相关文章

网友评论

      本文标题:canvas图像填充createPattern

      本文链接:https://www.haomeiwen.com/subject/hsnigxtx.html