HTML5 canvas平铺的代码详解

百变鹏仔 2个月前 (10-18) #H5教程

文章标签平铺

最近在做个网站项目，用到很多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() 方法在指定的方向内重复指定的元素。
元素可以是图片、视频，或者其他元素。
被重复的元素可用于绘制/填充矩形、圆形或线条等等。

JavaScript 语法：

立即学习“前端免费学习笔记（深入）”；

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

参数描述


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

文章推荐

HTML5 canvas平铺的代码详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集