canvas实现图像布局填充功能


Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
canvas实现图像截取功能
Feb 06 #Javascript
JS跨域请求外部服务器的资源
Feb 06 #Javascript
canvas实现动态小球重叠效果
Feb 06 #Javascript
canvas滤镜效果实现代码
Feb 06 #Javascript
canvas实现图像放大镜
Feb 06 #Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 #Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 #Javascript
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP中常用的魔术方法
2017/04/28 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
学习Django知识点分享
2019/09/11 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python3中确保枚举值代码分析
2020/12/02 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
飞利浦美国官网:Philips美国
2020/02/28 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
员工考核评语大全
2014/04/26 职场文书
毕业横幅标语
2014/10/08 职场文书
2015年化验员工作总结
2015/04/10 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python