fillStyle图片填充
图片自找
<!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图片填充的更多相关文章
- HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍
常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...
- CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)
目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...
- 使用Aspose.word (Java) 填充word文档数据(包含图片填充)
Aspose填充word数据 本文介绍了如何使用aspose进行word文档的生成,并提供了工具类供参考. 有问题欢迎 call 微信:905369866,小弟尽力而为..毕竟这玩意没吃透. 目录 A ...
- html 绘图渐变和图片填充
包括线性渐变和径向渐变 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&qu ...
- iOS图片填充UIImageView(contentMode)
本文主要形象的介绍一下UIView的contentMode属性: 核心代码 [self.prp_imageView setContentMode:UIViewContentModeScaleAspec ...
- QPainter绘制图片填充方式(正常大小、剪切大小、自适应大小、平铺)
Qt中QPainter提供了绘制图像的API,极大地方便了我们对图像的绘制. Qt中提供了QPixmap, QBitmap,QBitMapQImage,QPicture等图像绘图设备,它们的类关系如下 ...
- iOS 图片填充 UIImageView (contentMode)
掐指算下来做iOS开发也是有两年多的时间了,然后今天一个超级常用的控件让我颜面大跌,于是我准备把自己的丢人行径公之于众.如果您看到我这篇文章时和我一样,也是刚刚知道这项功能,那么您就当收获了一个... ...
- 图片填充UIImageView大小不对
http://www.2cto.com/kf/201507/412894.html UIView的contentMode属性: 默认为Scale To Fill,会保留view的比例,不会完全按照设定 ...
随机推荐
- .NET随记【你懂的】
.NET随记.txt放在桌面好久了,编程过程中记录些杂七杂八的东西,分享给大家希望有所帮助. goto 常用于 switch语句中 字符串相加用 StringBuilder的Append()方法性能好 ...
- Opencv摄像头实时人脸识别
Introduction 网上存在很多人脸识别的文章,这篇文章是我的一个作业,重在通过摄像头实时采集人脸信息,进行人脸检测和人脸识别,并将识别结果显示在左上角. 利用 OpenCV 实现一个实时的人脸 ...
- MySQL学习(一)MySQLWorkbench(MySQL可视化工具)下载,安装,测试连接,以及注意事项
PS:MySQLWorkbench是MYSQL自带的可视化工具,无论使用哪个可视化工具,其实大同小异,如果想以后走的更远的话,可以考虑使用命令行操作数据库MYSQL.可视化工具让我们初学者更能理解数据 ...
- norflash驱动编写笔记
[部分转自]http://blog.csdn.net/ziyiyunmen/article/details/9744901 1. 读数据 md.b 0 2. 读ID NOR手册上: 往地址555H写A ...
- jQuery的$.getJSON方法在IE浏览器下失效的解决方案
$.getJSON在IE下默认会使用浏览器缓存,所以导致数据不正确或者异常,解决方案就是在使用该方法前关闭缓存,使用完后再重新打开缓存即可. <?php $.ajaxSetup({ cache: ...
- mybatis入门基础(二)----原始dao的开发和mapper代理开发
承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...
- Net设计模式实例之建造者模式(Builder Pattern)
一.建造者模式简介(Brief Introduction) 建造者模式(Builder Pattern),将一个复杂对象的构建与它的表示分离,使的同样的构建过程可以创建不同的表示. 建造者模式的优点是 ...
- Xamarin.Android之给我们的应用加点过渡效果
零.前言 试想一下,我们的应用正在请求一些数据,假设网络不是很好,要花比较长的时间等待,这个时候界面什么反应也没有, 一动不动,用户可能就会认为应用挂掉了,这么久都没反应的,说不定下一分钟用户就把它卸 ...
- 神奇的CSS3按钮特效
点击这里查看效果 以下是源代码: <!doctype html> <html> <!-- author: @simurai --> <head> < ...
- .NET多线程总结和实例介绍
摘要:.Net提供了许多多线程编程工具,可能是因为太多了,所以掌握起来总是有一些头疼,我在这里讲讲我总结的一些多线程编程的经验,希望对大家有帮助. 1.多线程的总结 不需要传递参数,也不需要返回参数 ...