这儿介绍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. (转载)HTML--- input type=hidden

    (转载)http://www.blogjava.net/lansky07/archive/2007/04/05/108740.html HTML--- input type=hidden 关于< ...

  2. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  3. 高效算法——G - 贪心

    G - 贪心 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit Status Desc ...

  4. flex与C# Socket通信

    原文地址:http://blog.csdn.net/LX10752p/archive/2011/04/27/6366526.aspx Socket 通信没什么好说,一个服务端,多个客户端,很容易搭建环 ...

  5. bzoj 3572 [Hnoi2014]世界树(虚树+DP)

    3572: [Hnoi2014]世界树 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 645  Solved: 362[Submit][Status] ...

  6. Codeforces Round #259 (Div. 2) D. Little Pony and Harmony Chest 状压DP

    D. Little Pony and Harmony Chest   Princess Twilight went to Celestia and Luna's old castle to resea ...

  7. 配置Chrome启动参数支持本地AJAX请求,解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题

    直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...

  8. hdu-1272 并查集

    Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该 ...

  9. Palindrome - POJ 3974 (最长回文子串,Manacher模板)

    题意:就是求一个串的最长回文子串....输出长度. 直接上代码吧,没什么好分析的了.   代码如下: ================================================= ...

  10. Moderate 加入空格使得可辨别单词数量最多 @CareerCup

    递归题目,注意结合了memo的方法和trie的应用 package Moderate; import java.util.Hashtable; import CtCILibrary.AssortedM ...