图片自找

<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</title> <style type="text/css"> #canvas{border:1px solid #eee ; display:block; background-color: #B36666; margin: 20px auto; } </style></head><body><div><canvas id = "canvas" width = "800px" height = "800px"></canvas></div> <script type = "text/javascript" >
window.onload=function(){
var context = document.getElementById('canvas').getContext('2d')

/*
context.createPattern(img'repeat-style');
repeat-style参数可以是：
'no-repeat' 不重复
'repeat' x，y轴重复
'repeat-x' x轴重复
'repeat-y' y轴重复

扩展：context.createPattern(img'repeat-style')方法参数：
可以是image图片作为参数，
可以是canvas对象作为参数
可以是video视频对象作为参数

总结：context.fillStyle 可以等于以下参数
color 
gradient
image
canvas
video;

*/
var image1 = new Image();
image1.src = '1.png';
image1.onload = function(){
var pattern = context.createPattern(image1,'repeat');
context.fillStyle=pattern;
context.fillRect(0,0,800,800);
}
}
</script> </body> </html>

fillStyle图片填充的更多相关文章

  1. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍

    常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...

  3. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. 使用Aspose.word (Java) 填充word文档数据（包含图片填充）

    Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...

  5. html 绘图渐变和图片填充

    包括线性渐变和径向渐变 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...

  6. iOS图片填充UIImageView(contentMode)

    本文主要形象的介绍一下UIView的contentMode属性: 核心代码 [self.prp_imageView setContentMode:UIViewContentModeScaleAspec ...

  7. QPainter绘制图片填充方式（正常大小、剪切大小、自适应大小、平铺）

    Qt中QPainter提供了绘制图像的API,极大地方便了我们对图像的绘制. Qt中提供了QPixmap, QBitmap,QBitMapQImage,QPicture等图像绘图设备,它们的类关系如下 ...

  8. iOS 图片填充 UIImageView (contentMode)

    掐指算下来做iOS开发也是有两年多的时间了,然后今天一个超级常用的控件让我颜面大跌,于是我准备把自己的丢人行径公之于众.如果您看到我这篇文章时和我一样,也是刚刚知道这项功能,那么您就当收获了一个... ...

  9. 图片填充UIImageView大小不对

    http://www.2cto.com/kf/201507/412894.html UIView的contentMode属性: 默认为Scale To Fill,会保留view的比例,不会完全按照设定 ...

随机推荐

  1. Objective-C中小怪兽的逻辑

    学习Objective-C的面向对象也有一段时间了,为了犒劳自己的学习成果,写个小怪兽来犒劳一下自己把.在LOL中有怪兽和英雄的角色吧,接下来就先写一个小怪兽的类吧.从小怪兽的角度来讲,怪兽都有那些行 ...

  2. 小菜学习Winform（一）贪吃蛇

    前言 说到贪吃蛇,大家可能小时候都玩过,小菜最近在整理Winfrom的学习系列,那我觉得有兴趣才会有学习,就从这个小游戏讲起吧. 实现 其实我刚开始学习编程的时候,感觉写个贪吃蛇的程序会很难,因为涉及 ...

  3. C# 将多个office文件转换及合并为一个PDF文件

    PDF文件介绍 PDF(Portable Document Format )文件源于20世纪90年代初期,如今早已成为了一种最流行的的文件格式之一.因为PDF文件有很多优点: 支持跨平台和跨设备共享 ...

  4. c/c++系列的运算符优先级总结

    经常写程序的时候,遇到运算符优先级的问题,令我汗颜的是,查书的次数挺多的……狠狠心,总结下.不过还要结合大量的编程实践来深入脑海. 1.首先永远忘不了的是,逗号运算符级别最低,毫无争议的还有()括起来 ...

  5. 表空间基于时间点的恢复(TSPITR)

    环境:RHEL 6.4 + Oracle 11.2.0.4 准备模拟环境 1. 验证表空间的依赖性 2. 确定执行TSPITR后会丢失的对象 3. 自动执行TSPITR Reference 准备模拟环 ...

  6. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...

  7. [linux]ssh（转载）

    ssh登陆问题 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则su ...

  8. 【JUC】JDK1.8源码分析之Semaphore（六）

    一.前言 分析了CountDownLatch源码后,下面接着分析Semaphore的源码.Semaphore称为计数信号量,它允许n个任务同时访问某个资源,可以将信号量看做是在向外分发使用资源的许可证 ...

  9. QTableWidget行选中/删除/添加行

    1  均分各列 tableWidget->horizontalHeader()->setStretchLastSection(true); //就是这个地方 tableWidget-> ...

  10. C#的变迁史 - C# 4.0 之线程安全集合篇

    作为多线程和并行计算不得不考虑的问题就是临界资源的访问问题,解决临界资源的访问通常是加锁或者是使用信号量,这个大家应该很熟悉了. 而集合作为一种重要的临界资源,通用性更广,为了让大家更安全的使用它们, ...