HTML5 canvas 平铺的几种方法

最近在做个网站项目，用到很多canvas，有个需求是drawImage把图片画在canvas里面，图片比较小，需要平铺效果，当背景图。PS（背景图高宽10px，需要画的画布高宽200px）

由于一开始是drawImage出来的，所以采用了方法one

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){var can = document.createElement("canvas");can.width = 10;can.height = 10;var ctx2 = can.getContext("2d");ctx2.drawImage(img,0,0,10,10,0,0,10,10);ctx.fillStyle = ctx.createPattern(can,"repeat");ctx.fillRect(0,0,200,200);
}

用到了背景图的高宽度10，有点繁琐，为什么不一步到位呢？所以改成了这种方式

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){var pat = ctx.createPattern(img,"repeat");ctx.rect(0,0,200,200);ctx.fillStyle = pat;ctx.fill();
}

GOOD！
再来重申下createPattern定义

createPattern() 方法在指定的方向内重复指定的元素。
元素可以是图片、视频，或者其他 <canvas> 元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法：

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

参数	描述
repeat	默认。规定要使用的图片、画布或视频元素。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

HTML5 canvas 平铺的几种方法相关推荐

html 重置画布坐标系,html5实现清空画布的三种方法
摘要腾兴网为您分享:html5实现清空画布的三种方法,找乐助手,悦读小说,一起成长,央视影音等软件知识,以及e430无线网卡驱动,要坚强表情包,微信制作宣传广告,先锋党建,五金计算软件,恒房通app ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
HTML5系列代码：使用三种方法插入图像
drawImage() 方法在画布上绘制图像.画布或视频. drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸. <!DOCTYPE HTML> < ...
html5图片平铺的代码,jQuery图片平铺效果制作网页背景图片平铺代码
插件描述:jQuery图片平铺效果制作网页背景图片平铺代码调用JS文件调用插件方法 $(function(){ // 插件初始化 $('img').jqthumb({ classname : 'j ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
iOS实现平铺的几种简单方式
UI效果原图为一个小圆圈,实现将该图平铺到一个较大的视图中,并保证清晰度不变. 一.colorWithPatternImage 通过iOS自带的image平铺成UIColor,可快速将UIView的 ...
canvas制作火焰的两种方法
方法一.实时渲染 01)在body建立canvas 02)在ctx=canvas.getContext('2d')上绘制n个微透明的圆 03)绘制效果是颜色叠加'lighter',透明度0.3 ctx ...
HTML5页面跳转的几种方法
1.定时跳转或者原地刷新对于刷新当前页面js控制为: window.location.reload();//刷新当前页面,重新向服务器请求数据 head标签内部的meta标签方式,定时刷新当前界面或 ...

HTML5 canvas 平铺的几种方法

HTML5 canvas 平铺的几种方法相关推荐

最新文章

热门文章