/**
* 图片平铺
*/
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. CSS-DOM

    在所有的产品设计中,选择最适用的工具去解决问题是最基本的原则. ①使用(X)HTML去搭建文档的结构. ②使用CSS 去设置文档的呈现效果. ③使用DOM脚本去实现文档的行为. 文档中的每个元素都是一 ...

  2. 16、SpringBoot------整合MapStruct

    开发工具:STS 前言: 前端提交往后端的数据,一部分是不需要存入数据库当中的: 后端从数据库中取出的数据,一部分是不可以交给用户的: 那么,po面向的是DB,vo面向的是客户端, mapstruct ...

  3. LeetCode46. Permutations

    Given a collection of distinct integers, return all possible permutations. Example: Input: [1,2,3] O ...

  4. 1801: [Ahoi2009]chess 中国象棋

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2520  Solved: 1524[Submit][Status][Discuss] Descripti ...

  5. JAVA / MySql 编程——第八章 DAO 模式

    1.        数据持久化:将程序中的数据在瞬时状态和持久状态间转换的机制即为数据持久化: 2.        持久化的实现方式:数据库.普通文件.XML文件: 3.        JDBC封装: ...

  6. Web前端开发面试技巧

    Web前端开发面试技巧 面试前端工程师对我来说是一件非常有意思的事,因为面试过程很大程度上也是自我提升的过程.无论大公司还是小公司,之所以在如何招聘到真正有能力的,前端工程师方面会遇到同样的问题. 近 ...

  7. 45.VUE学习之--组件之父组件使用scope定义子组件模板样式结构实例讲解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 解决SecureCRT远程Linux遇到文件不能直接往CRT里直接拖入的问题

    不能拖入到CRT的第一个原因可能是Options-->Global Options-->Terminal中的Mouse下的Copy on select没有勾选.当发现自己勾选了也不能往里面 ...

  9. linux基础命令3(man)

    Type:显示指定的命令是那种类型.                                            Linux下有两种模式的时间 date:用于系统时间管理.(软件操作的系统时 ...

  10. 笔记-Python-language reference-5.the import system

    笔记-Python-language reference-5.the import system 前言 经常用到import,module,对其中的机制及原理有一定的了解,但没有将各种信息前后连通起来 ...