【canvas实现图像处理】canvas实现图像布局填充功能

更新时间:2021-06-14    来源:图像处理    手机版     字体:

【www.bbyears.com--图像处理】

 代码如下

  

  canvas-图像布局填充

  

  

  

  <script>

    //获取到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);

    }

  </script>

本文来源:http://www.bbyears.com/jiaocheng/123734.html