canvas图像填充createPattern

2017-12-29  本文已影响0人  infi_
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

上一篇下一篇

猜你喜欢

热点阅读