canvas图像填充createPattern

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简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,185评论 2 32
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 7,938评论 2 28
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,357评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 5,438评论 0 4
  • HTML5 中新增的一个相当于画布的标签,自带各种 API ,通过 JS 调用和搭配,实现图案绘制和想要的效果。 ...
    Primers阅读 5,321评论 0 1