这儿介绍canvas的ccreatePattern函数,

context.createPattern(Image,"repeat"),还可以repeat-x,reapter-y

还可以context.createPattern(vedio,"repeat");

context.createPattern(canvas,"repeat");

var image=new Image();

image.src="a.jpg";

image.onload=function(){

  //var pattern=context.createPattern(image,"repeat");

  var canvas=createbackgroundCanvas();

  var pattern=context.createPattern(canvas,"repeat");

  context.fillStyle=pattern;

  context.fillRect(0,0,800,800);

  

}

function createbackgroundCanvas()

{

........

}

当然,以上所说的除了适用于fillStyle,还适用于strokeStyle

canvas 背景填充的更多相关文章

  1. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  2. canvas背景透明

    var can=document.getElementById("canv"); c=can.getContext("2d"); c.globalAlpha=. ...

  3. HTML5 Canvas渐进填充与透明

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

  4. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML连载32-背景颜色、背景图片、背景填充

    一.背景 1.如何设置标签的背景颜色 (1)在CSS中有一个background-color:属性值:,就是专门用来设置标签的背景颜色. (2)取值:具体单词.RGB.RGBA.十六进制 例子: &l ...

  6. 图形处理:给 Canvas 文本填充线性渐变

    作者:凹凸曼 - Barrior 在 Canvas 中对文本填充水平或垂直的线性渐变可以轻易实现,而带角度的渐变就复杂很多:就好像下面这样,假设文本矩形宽为 W, 高为 H, 左上角坐标为 X, Y. ...

  7. Cocos Creator (webgl模式下怎么让canvas背景透明)

    项目中构建出web-mobile包后,打开main.js 在main.js中加入如下两行即可让canvas变透明 cc.director.setClearColor(new cc.Color(0,0, ...

  8. canvas背景动画

    偶然反驳可看到博客背景的炫酷效果  觉得很新奇就去查看了一下源码  结果在git上找到了  记录一下 https://github.com/hustcc/canvas-nest.js/

  9. canvas背景

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

随机推荐

  1. QTP中FSO的使用

    序 FSO即文件系统对象(File System Object),在测试工作中有广泛的应有,它可以帮助我们自动生成测试目录,写日志,测试报告等.FSO有对象有很多属性和方法,今天只介绍几个常用的. 创 ...

  2. kafka-简单事例

    开始创建项目,这里所用的工程结构是maven. 在pox.xml中添加kafka的依赖包,如下所示: <dependency> <groupId>org.apache.kafk ...

  3. Python中的迭代器和生成器

    本文以实例详解了python的迭代器与生成器,具体如下所示: 1. 迭代器概述: 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后 ...

  4. python 解析xml 文件: Element Tree 方式

    环境 python:3.4.4 准备xml文件 首先新建一个xml文件,countries.xml.内容是在python官网上看到的. <?xml version="1.0" ...

  5. zznu 1073: 海军节上的鸣炮声计算

    这是个一不留神就会出错的题目,首先大家可以想到在同一时间可能会有多个炮同时发射,不过观众只能听到一响,所以需要注意! 而且刚开始的时候所有的船都会发射一发,输入的a, b, c,都是时间间隔,

  6. CentOS虚拟机不能联网状况下yum方式从本地安装软件包(转载的)

    大家都知道yum是linux下一个非常好用的软件安装/卸载软件,它方便操作,而且最厉害的是可以解决令人头疼的包依赖关系.但是若是你的linux不能联网,若想使用yum安装软件,可以依照下面的方法. 1 ...

  7. Android RelativeLayout 布局android:layout_centerHorizontal="true"注意

    特别注意,如果要是 android:layout_alignTop="@id/bind_decode_item_layout" android:layout_centerHoriz ...

  8. java.lang.NoClassDefFoundError: com/ibatis/sqlmap/engine/mapping/result/BasicResultMap

    错误日志: java.lang.NoClassDefFoundError: com/ibatis/sqlmap/engine/mapping/result/BasicResultMap     at ...

  9. [io PWA] keynote: Launching a Progressive Web App on Google.com

    Mainly about Material design (effects / colors / flashy stuff) Components (web components / polymer) ...

  10. android EditText中的inputType

    android 1.5以后添加了软件虚拟键盘的功能,所以在输入提示中将会有对应的软键盘模式 android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.这也大大 ...