canvas实现图像布局填充功能

更新时间：2017年02月06日 16:30:01 作者：蓝丶木鱼

这篇文章主要为大家详细介绍了canvas实现图像布局填充功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas图像布局填充的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-图像布局填充</title> 
  <style> 
    #canvas{ 
      border: 1px solid palevioletred; 
    } 
  </style> 
</head> 
<body> 
  <canvas id="canvas" width="600px" height="600px"> 
  </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> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS运动特效之完美运动框架实例分析
这篇文章主要介绍了JS运动特效之完美运动框架,结合实例形式分析了javascript针对运动中的元素属性检测与判断相关操作技巧,需要的朋友可以参考下
2018-01-01
深入理解JavaScript函数参数(推荐)
这篇文章主要介绍了深入理解JavaScript函数参数(推荐)的相关资料,需要的朋友可以参考下
2016-07-07
ECMAscrip新特性函数介绍
这篇文章主要介绍了ECMAscrip新特性之函数的扩展,在ECMAScript 2015中，允许为函数的参数添加默认值，将默认值直接写在参数的后面即可,具体情况参考下面文章的详细内容
2021-12-12
基于Next.js实现在线Excel的详细代码
Next.js是一款React 开发框架，它可以帮助我们构建 React 应用程序。作为一个轻量级React服务端渲染应用框架，这篇文章主要介绍了基于 Next.js实现在线Excel,需要的朋友可以参考下
2022-08-08
JS严格模式原理与用法实例分析
这篇文章主要介绍了JS严格模式原理与用法,结合实例形式分析了JS严格模式基本概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
2020-04-04
js电话号码验证方法
JS电话号码验证是比较常的一种验证，下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的，还可以带有长途的区号。
2015-09-09
CodeMirror实现代码对比功能(插件react vue)
这篇文章主要介绍了CodeMirror实现代码对比功能,用到的插件有vue或者react都需要这一步且同样的下载方式，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-05-05
js实现双人五子棋小游戏
这篇文章主要为大家详细介绍了js实现双人五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
JS实现的系统调色板完整实例
这篇文章主要介绍了JS实现的系统调色板,结合完整实例形式分析了js实现调色板效果的具体步骤与实现技巧,涉及js数值计算与页面元素操作的方法,需要的朋友可以参考下
2016-12-12
javascript生成随机数方法汇总
实现随机数是各种编程语言都很常见的一个编程任务，下面介绍一下在JavaScript如何实现随机数。非常的简单实用的例子奉献给大家，希望大家能够喜欢。
2015-11-11