热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

说说在Canvas中如何用图片来填充形状

context的createPattern()方法可以在指定的方向内重复指定的元素。语法为context.createPattern(image,repeat|repe

context 的 createPattern() 方法可以在指定的方向内重复指定的元素。语法为 context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

参数 描述
image 要使用的图片、画布或视频元素。
repeat 默认值,表示在水平和垂直方向重复。
repeat-x 表示在水平方向重复。
repeat-y 表示在垂直方向重复。
no-repeat 表示只显示一次(不重复)。

假设有一张图片,我们只用这张图片来填充正方形,图片存储为 girl.jpg。

说说在 Canvas 中如何用图片来填充形状

该图片来源于网络。

Steve Fulton 与 Jeff Fulton 举了一个图片填充的示例(做了改写)。

var fillImg = new Image(); fillImg.src = 'girl.jpg'; fillImg.Onload= function () { context.fillStyle = context.createPattern(fillImg, 'repeat'); context.fillRect(0, 0, 600, 600); }

运行结果:

说说在 Canvas 中如何用图片来填充形状

首先创建了一个 Image() 对象,并设定好图片地址;接着定义 onload 事件,平铺放置该图片。

也可以选择不平铺(no-repeat)、y 轴平铺(repeat-y)或者 x 轴平铺(repeat-x)。

context.fillStyle = context.createPattern(fillImg, 'no-repeat'); context.fillRect(0, 0, 200, 200); context.fillStyle = context.createPattern(fillImg, 'repeat-y'); context.fillRect(0, 220, 200, 580); context.translate(210,400); context.fillrepeat-x'); context.fillRect(0, 0, 580, 200);

运行结果:

说说在 Canvas 中如何用图片来填充形状

这里为了凸显出 repeat-x 效果,通过 context.translate() 方法把图片先移动到 (210,400)作为 fillRect() 方法的原点坐标。


推荐阅读
author-avatar
李大乔vivi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有