图片自找

<!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. 延时调用--deferred.js原码分析

    有些时候,我们需要等待上一个操作完成之后,才能进行下一步的操作.比如Ajax实现自动提交表单操作的时候,程序需要等待,一旦有返回结果了,则继续进行一下步操作. 这时deferred.js这个库就产生了 ...

  2. 《图解Spark：核心技术与案例实战》介绍及书附资源

    本书中所使用到的测试数据.代码和安装包放在百度盘提供 下载 ,地址为https://pan.baidu.com/s/1o8ydtKA 密码:imaa 另外在百度盘提供本书附录  下载 ,地址为http ...

  3. ZOJ Problem Set - 1205 Martian Addition

    一道简单题,简单的20进制加减法,我这里代码写的不够优美,还是可以有所改进,不过简单题懒得改了... #include <stdio.h> #include <string.h> ...

  4. Oracle OCP 1Z0-053 Exam Topics

    根据OU官方发布的考试大纲,OCP 1Z0-053考点如下: 1. Database Architecture and ASM Describe Automatic Storage Managemen ...

  5. 7.Struts2复杂类型数据的接受

    复合类型数据的接收 所谓复合类型数据是指,一个JavaBean实例的属性值,而这些值又作为参数传递给Action. Action若要接收这些数据,需要做到以下几点: (1)定义Action时,将该Be ...

  6. 用大白话聊聊JavaSE -- 自定义注解入门

    注解在JavaSE中算是比较高级的一种用法了,为什么要学习注解,我想大概有以下几个原因: 1. 可以更深层次地学习Java,理解Java的思想. 2. 有了注解的基础,能够方便阅读各种框架的源码,比如 ...

  7. mysql 日期函数总结

    1.0 格式化:DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. 语法 DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的 ...

  8. C#播放MP3源代码

    代码如下: using System; using System.Runtime.InteropServices; using System.Text; using System.IO ; using ...

  9. CSS基础转载

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4 ...

  10. ASP.NET MVC 了解FileResult的本质

    FileResult是一个基于文件的ActionResult,利用FileResult我们可以很容易地将从某个物理文件的内容响应给客户端.ASP.NET MVC定义了三个具体的FileResult,分 ...