`

CanvasPattern对象用法详解

阅读更多

画布中添加背景图案

我们可以使用如下方法来添加背景图案:

createPattern(imageobj, option)

其中imageobj是对应图片对象,option是相关图片属性,可以设置为repeat(缺省值), repeat-x, repeat-y, no-repeat。

 

创建好背景后,我们可以使用类似填充颜色的方法来填充图案,如下:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 CanvasPattern实现图像平铺的入门示例</title>
</head>
<body>

<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvas id="gbcanvas" width="1150" height="300"></canvas>

<script type="text/javascript">
    /*Javascript源代码*/
    var canvas = document.getElementById('gbcanvas'), // 这里通过gbCanvas获取canvas对象
            context = canvas.getContext('2d'); //这里通过canvas获取处理API的上下文context

    //生成背景图案
    var imageobj = new Image();
    imageobj.onload = function(){
        //这里确保图片加载后在执行HTML5画布的相关方法
        var pattern = context.createPattern(imageobj, 'repeat');
        context.rect(0,0, 950, 300);
        context.fillStyle = pattern;
        context.fill();
    }
    //设置背景图案的地址
    imageobj.src = 'http://www.gbtags.com/gb/networks/uploadimg/d72f284c-c729-4de7-ba3e-b93587cb1446.jpg';
</script>
</body>
</html>

 

 

 

 

 

 

CanvasPattern对象是HTML5 Canvas API中用于给指定的图形铺上指定的图像的关键对象,这与CSS中background属性的作用有点类似。CanvasPattern 对象就表示平铺图像所采用的模式(在指定的图形上以何种方式进行平铺)。

CanvasPattern对象的用法非常简单。我们只需要使用CanvasRenderingContext2D对象的 createPattern() 方法创建一个新的 CanvasPattern 对象,并将该对象设为CanvasRenderingContext2D对象的strokeStylefillStyle属性值即可。

下面,我们就来详细了解一下CanvasRenderingContext2D对象的createPattern()方法。

createPattern(image, repetitionStyle)

createPattern()方法用于创建一个表示将图像在当前图形上以什么样的方式进行重复平铺的CanvasPattern对象。参数image指定用于平铺的图像,该参数可以是一个Image对象,也可以是一个Canvas对象。参数repetitionStyle表示图像如何进行重复平铺,可能的值有repeat(在水平和垂直方向上均进行重复平铺,这也是默认值)、repeat-x(只在水平方向上重复平铺)、repeat-y(只在垂直方向上重复平铺)、no-repeat(只铺一次,不进行重复平铺)。

下面,我们就来看一个具体的例子。我们将如下图所示的图像(宽度和高度均为20px),在canvas指定的矩形区域中进行不同方式的平铺,并查看对应的图形效果。

用于平铺的图片:用于平铺的图片(注意:原图片已丢失,此处放置的是一个类似的图片,只是颜色略有差异)。

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>HTML5 CanvasPattern实现图像平铺的入门示例</title>
</head>
<body>
<!-- 添加canvas标签,并加上红色边框以便于在页面上查看 -->
<canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){  
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");  
   
    //创建一个表示图片的Image对象
    var img =newImage();
    //指定图片的URL
    img.src ="http://www.365mini.com/static/upload/image/info.png";
    //当图片加载完毕后再设置对应的图像平铺模式并填充矩形
    img.onload =function(){
        //创建CanvasPattern对象,指定上述图片进行水平和垂直方向的重复平铺
        var pattern = ctx.createPattern(img,"repeat");
        ctx.fillStyle = pattern;
        //从坐标点(0,0)开始,绘制并填充宽度为200px、高度为100px的矩形
        ctx.fillRect(0,0,200,100);      
    }
}
</script>
</body>
</html>

 

对应的显示效果如下:

repeat:水平方向和垂直方向均重复平铺repeat:水平方向和垂直方向均重复平铺

 

值得注意的是,如上述代码所示,如果createPattern()方法的image参数值不是当前页面一个已经存在的Image对象或Canvas对象,那么我们需要等待浏览器将图片加载完毕后才能调用createPattern()方法及后续操作,否则将无法正确显示对应的图形。

接着,我们将createPattern()方法的第2个参数repetitionStyle改为其他可能的值并分别查看对应的图形效果。

 

repeat-x:只在水平方向上重复平铺repeat-x:只在水平方向上重复平铺

repeat-y:只在垂直方向上重复平铺repeat-y:只在垂直方向上重复平铺

no-repeat:不进行重复平铺no-repeat:不进行重复平铺

 

此外,有一点尤为需要注意,CanvasPattern对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角,而是整个canvas画布的左上角,确切地说,即canvas的起点坐标(0,0)。在上面的例子中,我们的矩形的起始坐标点也是(0,0),所以看不出有什么区别。现在,我们将矩形的起始坐标点改为(10,10),我们再来看看绘制的图形效果。

<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
    //获取对应的CanvasRenderingContext2D对象(画笔)
    var ctx = canvas.getContext("2d");
    //创建一个表示图片的Image对象
    var img =newImage();
    //指定图片的URL
    img.src ="http://www.365mini.com/static/upload/image/info.png";
    //当图片加载完毕后再设置对应的图像平铺模式并填充矩形
    img.onload =function(){
        //创建CanvasPattern对象,指定上述图片进行水平和垂直方向的重复平铺
        var pattern = ctx.createPattern(img,"repeat");
        ctx.fillStyle = pattern;
        //从坐标点(10,10)开始,绘制并填充宽度为200px、高度为100px的矩形
        ctx.fillRect(10,10,200,100);
    }
}
</script>

 

对应的显示效果如下:

矩形起点坐标更改后的图像平铺效果矩形起点坐标更改后的图像平铺效果

 

在上面的示例代码中,我们用于平铺的图像没有变、矩形的大小也没有,仅仅只更改了矩形的起点坐标,就出现了上述不同的效果。这就是因为CanvasPattern对象平铺图像的参考起点坐标就是canvas画布的起点坐标。

 

你可以这样理解,我们的图像就是直接平铺在canvas上的,只是默认情况下,这些图像都不可见。当我们绘制图形时,该图形所在区域的图像才会显示出来。你可以参考下面几个例子,以帮助理解。

更改矩形起点为(20,20),repeat更改矩形起点为(20,20),repeat

更改矩形起点为(30,30),repeat-x更改矩形起点为(30,30),repeat-x

绘制一个等边直角三角形,repeat绘制一个等边直角三角形,repeat

注意:到目前为止,FireFox浏览器对该对象的支持存在bug,你所期望的效果可能和实际显示效果不一致。

分享到:
评论

相关推荐

    借助HTML5 Canvas来绘制三角形和矩形等多边形的方法

    此外,Canvas也支持渐变和模式填充,通过创建CanvasGradient或CanvasPattern对象,可以为图形添加平滑的色彩过渡或使用重复的图案填充。 总结起来,HTML5 Canvas 提供了一个强大而灵活的图形绘制平台,使得开发者...

    Canvas2D introduction.pptx

    这里,我们设置了填充颜色为蓝色(`context.fillStyle = 'blue'`),并使用 `fillRect()` 方法绘制了一个矩形,其左上角坐标为 (10, 20),宽高分别为 200 和 100。 #### 三、Canvas2D 规范与实现 Canvas2D 的规范...

    go 生成基于 graphql 服务器库.zip

    格奇尔根 首页 > 文件 > gqlgen是什么?gqlgen是一个 Go 库,用于轻松构建 GraphQL 服务器。gqlgen 基于 Schema 优先方法— 您可以使用 GraphQL Schema 定义语言来定义您的 API 。gqlgen 优先考虑类型安全— 您永远不应该看到map[string]interface{}这里。gqlgen 启用 Codegen — 我们生成无聊的部分,以便您可以专注于快速构建您的应用程序。还不太确定如何使用gqlgen?将gqlgen与其他 Go graphql实现进行比较快速启动初始化一个新的 go 模块mkdir examplecd examplego mod init example添加github.com/99designs/gqlgen到项目的 tools.goprintf '//go:build tools\npackage tools\nimport (_ "github.com/99designs/gqlgen"\n _ "github.com/99designs/gqlgen

    基于JAVA+SpringBoot+Vue+MySQL的社区物资交易互助平台 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:maven 数据库工具:navicat

    法研杯2021类案检索赛道三等奖方案源码+项目说明+数据.zip

    法研杯2021类案检索赛道三等奖方案源码+项目说明+数据.zip是一个专为计算机相关专业(如计科、信息安全、数据科学与大数据技术等)学生设计的宝贵学习资源。该压缩包包含了完整的项目源码、详细的项目说明文档以及用于训练和测试的数据集,旨在帮助参赛者深入理解并掌握类案检索的相关技术和方法。该项目通过实际案例,展示了如何运用自然语言处理和机器学习技术对法律案件进行智能检索和匹配。项目内容涵盖了从数据预处理、特征提取到模型训练和评估的全过程,为学习和研究类案检索技术提供了全面的参考。本项目不仅适合作为课程设计、期末大作业或毕设项目的参考,也是企业员工提升技能、进行实践操作的优质学习资料。通过实际操作和学习该项目,用户可以加深对类案检索技术的理解,并在实践中不断提升自己的技能水平。请注意,由于该资源包含完整的项目源码和数据集,下载和使用时请确保遵守相关法律法规和道德规范,尊重知识产权和隐私权。同时,建议用户在使用前仔细阅读项目说明文档,了解项目的整体架构和使用方法,以便更好地利用该资源进行学习和研究。

    基于Cesium实现的对倾斜摄影模型的单体化分层方案源码.zip

    本资源提供了基于Cesium实现的倾斜摄影模型单体化分层方案的完整源码,旨在帮助开发者深入理解并实践三维地理空间数据的处理与展示。通过Cesium平台,用户能够将倾斜摄影获取的高精度三维模型进行单体化和分层处理,实现对模型中每个独立元素的精细管理和交互操作。该资源适合具备一定计算机编程基础的学习者,特别是对Cesium感兴趣的学生、研究人员及GIS行业从业者。通过下载并学习这些源码,用户可以掌握倾斜摄影模型在Cesium中的加载、单体化以及分层显示等关键技术,进而提升自己在三维地理信息系统开发领域的技能水平。

    Go 的 PostgreSQL 驱动程序和工具包.zip

    Go 的 PostgreSQL 驱动程序和工具包 pgx - PostgreSQL 驱动程序和工具包pgx 是 PostgreSQL 的纯 Go 驱动程序和工具包。pgx 驱动程序是一个低级、高性能接口,它公开了 PostgreSQL 特定的功能,例如LISTEN/ NOTIFY和COPY。它还包括一个标准database/sql接口的适配器。工具包组件是一组相关的软件包,用于实现 PostgreSQL 功能,例如解析线路协议以及 PostgreSQL 与 Go 之间的类型映射。这些底层软件包可用于实现替代驱动程序、代理、负载均衡器、逻辑复制客户端等。示例用法package mainimport ( "context" "fmt" "os" "github.com/jackc/pgx/v5")func main() { // urlExample := "postgres://username:password@localhost:5432/database_name" conn, err := pgx.Connect(context.B

    C#ASP.NET中小型超市管理系统源码数据库 SQL2012源码类型 WinForm

    ASP.NET中小型超市管理系统源码 超市管理系统是专门为中小型超市打造的管理系统,可以方便管理时更加准确清晰的查看商品信息, 仓库出售与进货的信息,还有每一个部门员工的信息,也更加直观的体现出每一阶段的商品销售情况; 从而提高项目管理水平,实现了工作的协同化、提高了工作效率 二、功能介绍 1.1 UI Requirements界面要求 (1)界面美观,给用户一种很舒心的感觉。 (2)界面所体现出的功能清晰明了,让用户一目了然。 (3)界面的背景颜色搭配符合超市管理系统界面的设计理念。 1.2 UI Requirements界面要求 (1) 使用ADO.NET与数据库交互制作 (2) 使用Visual Studio设计窗体布局 (3) 使用提供的用控件快速开发 1.3 Development Environment 开发环境 (1) 开发工具:Visua

    毕设&课程作业_基于C#的易知仓库管理系统.zip

    计算机系毕业设计

    Go 编程教程的主列表、其撰写、其源代码以及其当前构建状态!.zip

    教程边缘TutorialEdge.net Go 教程 ‍‍欢迎来到 TutorialEdge Go 存储库!此 repo 的目标是能够跟踪所有 Go 教程及其各自的 github repo 位置和构建状态。这些将在 Go 最新版本发布时更新和运行。目录初学者教程中级教程高级教程DevOps项目数据格式并发教程挑战初学者教程这些教程主要针对那些希望提高对 Go 语言工作原理的基本理解的语言新手!教程标题 教程边缘 Github 构建状态 更新日期01 - Go 入门 阅读教程 TutorialEdge/getting-started-with-go 不适用02 - Go 基本类型教程 阅读教程 TutorialEdge/go-basic-types-tutorial 不适用03 - Go 复合类型教程 阅读教程 TutorialEdge/go-complex-types-tutorial 不适用04 - Go 函数教程 阅读教程 TutorialEdge/go-functions-tutorial 2019 年 3 月 27 日

    基于JAVA+SpringBoot+Vue+MySQL的敬老院管理系统 源码+数据库(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:maven 数据库工具:navicat

    基于LSB实现对水印图片,文字等信息的隐藏隐写和提取的DEMO源码(功能包括嵌入水印,提取水印等).zip

    本资源是一个基于LSB(最低有效位)算法实现的水印图片和文字信息隐藏与提取的DEMO源码。该源码展示了如何将水印图片或文字信息嵌入到宿主图像中,以及如何从宿主图像中提取出隐藏的信息。功能包括嵌入水印和提取水印等操作。通过使用LSB算法,该源码实现了对水印图片和文字信息的隐写和提取。LSB算法是一种常用的图像处理技术,通过修改图像的最低有效位来嵌入额外的信息。在嵌入过程中,源码将水印图片或文字信息转换为二进制数据,并将其嵌入到宿主图像的像素值中。在提取过程中,源码从宿主图像中读取嵌入的二进制数据,并将其转换回原始的水印图片或文字信息。本资源适用于学习和研究图像隐写术的相关领域。通过阅读和运行该源码,用户可以了解LSB算法的原理和应用,掌握如何在图像中隐藏和提取水印图片和文字信息的方法。请注意,本资源仅供学习使用,不得用于任何非法用途。

    毕设&课程作业_基于C#的和SQLServer2014的学生成绩管理系统 .zip

    计算机系毕业设计

    基于Flask,mysql slope one的图书推荐系统全部资料+详细文档.zip

    【资源说明】 基于Flask,mysql slope one的图书推荐系统全部资料+详细文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    【java毕业设计】中小企业人力资源管理系统的设计及实现源码(ssm+jsp+mysql+说明文档+LW).zip

    员工信息管理: 添加员工:录入新员工的信息到系统。 修改员工:对现有员工信息进行更新和修改。 考勤管理: 上班打卡:记录员工上班的考勤信息。 下班打卡:记录员工下班的考勤信息。 考勤查看:查看员工的考勤记录。 奖惩管理: 添加奖惩:记录员工的奖励或惩罚信息。 修改奖惩:对奖惩记录进行修改。 删除奖惩记录:从系统中移除奖惩记录。 绩效管理: 添加绩效:录入员工的绩效评估信息。 修改绩效:对绩效评估信息进行修改。 删除绩效:删除绩效评估信息。 离职退休费用: 添加费用:录入与离职或退休相关的费用信息。 修改费用:对费用信息进行修改。 删除费用:移除费用信息。 培训管理: 添加培训:录入新的培训计划或课程。 修改培训:对培训计划或课程进行修改。 删除培训:从系统中移除培训计划或课程。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7

    毕设&课程作业_基于C#的会员管理系统.zip

    计算机系毕业设计

    redis键值数据库源码分析.zip

    redis键值数据库源码分析Redis 代码redis键值数据库源码分析test:(测试)memtest.c 内存检测redis_benchmark.c用于redis性能测试的实现。redis_check_aof.c 用于更新日志检查的实现。redis_check_dump.c 用于本地数据库检查的实现。testhelp.c 一个C风格的小型测试框架。struct:(结构体)adlist.c用于对列表的定义,它是一个端点链表结构dict.c主要用于内存中的hash进行管理sds.c 用于对字符串的定义Sparkline.c 一个拥有样本列表的序列t_hash.c hash在Server/Client中的自定义操作。主要通过redisObject进行类型转换。t_list.c list在Server/Client中的应答操作。主要通过redisObject进行类型转换。t_set.c set在Server/Client中的应答操作。主要通过redisObject进行类型转换。t_string.c string在Server/Client中的应答操作。主要

    基于FLASK+VUE+MINTUI公众号自动回复+看图说话+ 微信支付+H5商城全部资料+详细文档.zip

    【资源说明】 基于FLASK+VUE+MINTUI公众号自动回复+看图说话+ 微信支付+H5商城全部资料+详细文档.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    Golang 实现了 Redis 服务器和集群 Go语言实现的Redis服务器和遍布各处.zip

    Gordislish Version 简体中文Godis是Redis Server的golang实现,旨在提供使用golang编写高并发中间件的示例。主要特点支持字符串、列表、哈希、集合、有序集合、位图多数据库和SELECT命令TTL发布/订阅地理区域AOF 和 AOF 重写RDB 读写多命令事务是原子的和隔离的。如果在执行过程中遇到任何错误,godis 将回滚已执行的命令复制(实验)服务器端集群对客户端是透明的,你可以连接到集群中的任何节点来访问集群中的所有数据。使用 raft 算法来维护集群元数据。(实验)MSET,,,,命令在集群模式下受支持并原子执行,允许在多个MSETNX节点DEL上RenameRenameNXMULTI集群模式下支持槽内命令事务并发核心,因此您不必担心您的命令过多地阻塞服务器。如果您能读懂中文,您可以在我的博客中找到更多详细信息。立即开始您可以在此存储库的发布版本中获取可运行的程序,该版本支持 Linux 和 Darwin 系统。./godis-darwin./godis-linux

    【java毕业设计】家政服务平台的设计与实现源码(springboot+vue+mysql+说明文档+LW).zip

    家政服务平台有管理员,雇主,雇员三个角色。管理员功能有个人中心,雇主管理,雇员管理,资料认证管理,项目类型管理,服务项目管理,需求信息管理,服务预约管理,申请预约管理,签订合同管理,雇主评价管理,留言板管理,系统管理。雇主可以发布需求,雇员可以申请预约,雇主支付报酬,雇主和雇员可以签订合同,雇主可以对雇员进行评价。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:springboot,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3

Global site tag (gtag.js) - Google Analytics