canvas实现图像布局填充功能

    //获取到canvas元素

    var canvas = document.getElementById('canvas');

    //获取canvas中的画图环境

    var context = canvas.getContext('2d');

    //创建Image对象

    var img = new Image();

    //alert(img);

    //引入图片URL

    img.src = "./image/huiji.png";

    window.onload = function (){

      //创建填充规则 .createPattern(图像对象,'规则'); 第二参数：repeat，no-repeat，repeat-x,repeat-y;

       var pattern = context.createPattern(img,'no-repeat');

      //设置填充属性

      context.fillStyle = pattern;

      context.fillRect(10,10,canvas.width,canvas.height);

    }