/**
* 图片平铺
*/
function initDemo7(){
var canvas = document.getElementById("demo7");
if (!canvas) return;
var context = canvas.getContext("2d");
var type = [
"no-repeat", // 不平铺
"repeat-x", // 横向平铺
"repeat-y", // 纵向平铺
"repeat" // 全画布平铺
];
var index = 3;
var img = new Image();
img.src = "images/timg3.jpg";
img.onload = function () {
// 平铺方式
context.fillStyle = context.createPattern(img, type[index]);
context.fillRect(0, 0, canvas.width, canvas.height);
}
}

Canvas 图片平铺设置的更多相关文章

  1. [UWP]通过自定义XamlCompositionBrushBase实现图片平铺

    1. 什么是XamlCompositionBrushBase 我早就想试试自定义XamlCompositionBrushBase,但一直没机会.上一篇文章介绍到使用Win2D的BorderEffect ...

  2. Duilib技巧:背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  3. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  4. android实现图片平铺效果&WebView多点触控实现缩放

    1.图片平铺效果实现非常简单,只要在xml中添加一个 android:tileMode的属性就可以了.首先在drawable文件夹中添加自己的my.xml文件.代码: Java代码 <?xml ...

  5. LODOP中设置设置图片平铺水印,超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

  6. iOS UIButton 设置图片平铺

    UIImage *image2 = [UIImage imageNamed:imgName]; CGFloat top = ; // 顶端盖高度 CGFloat bottom = ; // 底端盖高度 ...

  7. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  8. HTML布局排版2 div的和图片平铺方便管理

    在HTML里,由于浏览器显示器等差异,浏览器的宽度也会有变化,为了适应不同的宽度,需要用到平铺.例如页面前面的固定的条等,如果是纯色,可以用背景色,如果不是纯色,是渐变等,可以用条状图平铺.常见的布局 ...

  9. canvas实现平铺水印

    欲实现的水印平铺的效果图如下: 从图上看,应该做到以下几点: 文字在X和Y方向上进行平铺: 文字进行了一定的角度的旋转: 水印作为背景,其z-index位置应位于页面内容底部, 即不能覆盖页面主内容: ...

随机推荐

  1. 腾讯CodeStar第二季前端突击队腐蚀的画解法步骤笔记

    所有题目地址:http://codestar.alloyteam.com/q2 本题内容:http://www.cnblogs.com/yedeying/p/3617593.html 腐蚀的画涉及到的 ...

  2. 使用命令创建jenkins的job,解决jenkinsapi.custom_exceptions.JenkinsAPIException错误

    如果你使用 Python 2.7.12,Jenkins版本为Jenkins ver. 2.22,你使用我上面一种提到的修改的以下代码可以进行Jenkins的job复制 http://www.cnblo ...

  3. Android(java)学习笔记72:ProgressBar的使用

    1. ProgressBar使用 首先我们看例程如下: (1) main.xml文件如下: <?xml version="1.0" encoding="utf-8& ...

  4. C++11 新特性之 序列for循环

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/lr982330245/article/details/30971195 在C++中在C++中for循 ...

  5. Math.random()随机生成x~y间的数字

    JS如何随机产生数字呢?这就用到了Math.random()方法,它能够随机产生0~1间的数字,这个数可能为0,但会小于1. 那么,如果我想要大于等于1小于10之间的随机整数呢?需要分为以下几步: 1 ...

  6. 运行时库例程-acc_get_num_devices

    格式C 或 C++: int acc_get_num_devices( acc_device_t ); 描述例程 acc_get_num_devices 返回主机上指定类型的加速器设备数量.输入参数说 ...

  7. Python的socket编程

    我们知道两个进程如果需要进行通讯最基本的一个前提能能够唯一的标示一个进程,在本地进程通讯中我们可以使用PID来唯一标示一个进程,但PID只在本地唯一,网络中的两个进程PID冲突几率很大,这时候我们需要 ...

  8. 牛客小白月赛1 I あなたの蛙が帰っています 【卡特兰数】

    链接:https://www.nowcoder.com/acm/contest/85/I题目描述 あなたの蛙が帰っています!  蛙蛙完成了一趟旅行,回家啦!但它还是没有去它心中非常想去的几个地方.总共 ...

  9. mysql5.6 配置 文件

    mysql 3306 主库配置文件 [client] port = 3306 default-character-set=utf8mb4 socket = /ssd/mysql/3306/tmp/my ...

  10. 基于mybatis设计简单信息管理系统2

    1.空指针异常 public class CanvasServlet extends HttpServlet { private CanvasService canvasService; privat ...