图片自找

<!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. MVC html.actionlink

    Html.ActionLink 在 LinkExtensions 类中,ActionLink方法参数说明: 简单来说捏 就是这样滴 参数                      类型         ...

  2. iOS开发使用半透明模糊效果方法整理

    虽然iOS很早就支持使用模糊效果对图片等进行处理,但尤其在iOS7以后,半透明模糊效果得到大范围广泛使用.包括今年最新发布的iOS8也沿袭了这一设计,甚至在OS X 10.10版Yosemite中也开 ...

  3. 1Z0-053 争议题目解析687

    1Z0-053 争议题目解析687 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 687.Users are connected to a database instance th ...

  4. (十九)WebGIS中I查询的原理及设计(包含AGS、GeoServer、Supermap)

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 我们在使用arcmap时,经常会用到被称为I查询的工具.具体 ...

  5. jQuery-1.9.1源码分析系列（三） Sizzle选择器引擎——一些有用的Sizzle API

    说一下Sizzle中零碎的API.这些API有的被jQuery接管,直接使用jQuery.xxx就可以使用,有的没有被接管,如果要在jQuery中使用,使用方法是jQuery.find.xxx. 具体 ...

  6. 基于<MediaElement>的WPF视频播放器（终章）【3】

    一.前言 对于<MediaElement>前两章介绍了差不多了,其实好的界面还需要UI工程师的配合,比如帮忙设计下按钮的样式等等.同样视频本身也需要吸引人,不然做的再好的播放器也没用.之后 ...

  7. webControls与客户端脚本路径

    网上有用的资料不多,在一本电子书中摘抄了内容如下 webControls配置节只有一个clientScriptsLocation属性,此属性用于指定ASP.NET客户端脚本的默认存放路径.这些文件是包 ...

  8. 微软版的SqlHelper.cs类

    一,微软SQLHelper.cs类 中文版: using System; using System.Data; using System.Xml; using System.Data.SqlClien ...

  9. 装饰模式 - Decorator 和 外观模式 - Facade

    装饰模式 Decorator,不改变接口但动态给对象加入责任,所需功能按顺序串联起来控制,比生成子类灵活. 外观模式 Facade,让接口更简单.为子系统中的一组接口提供一个一致的界面. 参考:

  10. 基于CkEditor实现.net在线开发之路（2）编写C#代码，怎么调用它。

    上一章简约的介绍了CkEditor编辑器,可以编辑js逻辑代码,css,html,C#代码,这章我根据实际例子,讲解怎么编写C#代码和怎么调用它. 大家都还记得刚刚接触程序编时的hello Word吧 ...