HTML5 canvas 平铺的几种方法
来源:互联网 发布:dota2淘宝店 编辑:程序博客网 时间:2024/06/05 19:48
最近在做个网站项目,用到很多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");
1 0
- HTML5 canvas 平铺的几种方法
- 提高HTML5 canvas性能的几种方法!
- 提高HTML5 canvas性能的几种方法!
- 提高HTML5 canvas性能的几种方法!
- 提高HTML5 canvas性能的几种方法(转)
- 提高HTML5 canvas性能的几种方法
- 提高HTML5 canvas性能的几种方法!
- 在HTML5的Canvas上绘制椭圆的几种方法
- 在HTML5的Canvas上绘制椭圆的几种方法(转)
- HTML5 Canvas中绘制椭圆的5种方法
- HTML5页面跳转的几种方法
- html5 canvas 画笔透明的实现方法
- HTML5 用canvas制作时钟的方法
- HTML5 canvas drawImage() 方法
- HTML5 canvas drawImage() 方法
- html5 canvas 方法详解
- html5的canvas对象的translate方法和rotate方法
- android实现背景平铺的三种方法
- ZOJ 3956 Course Selection System (dp)
- ERROR 1665 (HY000): Cannot execute statement: impossible to write to binary log since BINLOG_FORMAT
- js预览本地资源
- 算法导论 练习题 8.1-4
- The working copy 'xxx' has uncommitted changes.
- HTML5 canvas 平铺的几种方法
- Vue.js 组件
- Vue-安装插件Vue Devtools
- [Mac] 教你如何绕过百度客戶端快速下載百度云盘的电影等文件,仅适应MAC OSx
- 利用数据建模时经常用到的交叉验证(Cross Validation)方法思想简介
- 数据库备份
- c++primer习题9.43
- cmake的常用命令:
- Convert QWERTY to Dvorak