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