`

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 的规范...

    【9493】基于springboot+vue的美食信息推荐系统的设计与实现.zip

    技术选型 【后端】:Java 【框架】:springboot 【前端】:vue 【JDK版本】:JDK1.8 【服务器】:tomcat7+ 【数据库】:mysql 5.7+ 项目包含前后台完整源码。 项目都经过严格调试,确保可以运行! 具体项目介绍可查看博主文章或私聊获取 助力学习实践,提升编程技能,快来获取这份宝贵的资源吧! 在当今快速发展的信息技术领域,技术选型是决定一个项目成功与否的重要因素之一。基于以下的技术栈,我们为您带来了一份完善且经过实践验证的项目资源,让您在学习和提升编程技能的道路上事半功倍。以下是该项目的技术选型和其组件的详细介绍。 在后端技术方面,我们选择了Java作为编程语言。Java以其稳健性、跨平台性和丰富的库支持,在企业级应用中处于领导地位。项目采用了流行的Spring Boot框架,这个框架以简化Java企业级开发而闻名。Spring Boot提供了简洁的配置方式、内置的嵌入式服务器支持以及强大的生态系统,使开发者能够更高效地构建和部署应用。 前端技术方面,我们使用了Vue.js,这是一个用于构建用户界面的渐进式JavaScript框架。Vue以其易上手、灵活和性能出色而受到开发者的青睐,它的组件化开发思想也有助于提高代码的复用性和可维护性。 项目的编译和运行环境选择了JDK 1.8。尽管Java已经推出了更新的版本,但JDK 1.8依旧是一种成熟且稳定的选择,广泛应用于各类项目中,确保了兼容性和稳定性。 在服务器方面,本项目部署在Tomcat 7+之上。Tomcat是Apache软件基金会下的一个开源Servlet容器,也是应用最为广泛的Java Web服务器之一。其稳定性和可靠的性能表现为Java Web应用提供了坚实的支持。 数据库方面,我们采用了MySQL 5.7+。MySQL是一种高效、可靠且使用广泛的关系型数据库管理系统,5.7版本在性能和功能上都有显著的提升。 值得一提的是,该项目包含了前后台的完整源码,并经过严格调试,确保可以顺利运行。通过项目的学习和实践,您将能更好地掌握从后端到前端的完整开发流程,提升自己的编程技能。欢迎参考博主的详细文章或私信获取更多信息,利用这一宝贵资源来推进您的技术成长之路!

    (源码)基于Spring、Struts和Hibernate的OA系统.zip

    # 基于Spring、Struts和Hibernate的OA系统 ## 项目简介 本项目是一个基于Spring、Struts和Hibernate框架的办公自动化(OA)系统。该系统主要用于企业内部的日常办公管理,包括用户登录、组织管理、权限管理等功能。系统前端使用现成的模板和JavaScript、jQuery技术,后端通过Struts、Hibernate和Spring框架实现业务逻辑和数据持久化。 ## 项目的主要特性和功能 ### 登录模块 防止多设备登录系统能够检测到同一账号在不同设备上的登录情况,并在检测到异地登录时通知用户并强制下线。 WebSocket支持使用WebSocket技术实现实时通知功能。 ### 组织管理模块 部门管理支持部门的增删改查操作,包括查看部门信息、职位信息和员工数量。 用户管理支持用户的增删改查操作,包括指定用户所在部门、职位和角色。 角色管理支持角色的增删改查操作,包括查看角色权限和修改角色权限。

    基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)

    基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目),该项目是个人毕设项目,答辩评审分达到98分,代码都经过调试测试,确保可以运行!欢迎下载使用,可用于小白学习、进阶。该资源主要针对计算机、通信、人工智能、自动化等相关专业的学生、老师或从业者下载使用,亦可作为期末课程设计、课程大作业、毕业设计等。项目整体具有较高的学习借鉴价值!基础能力强的可以在此基础上修改调整,以实现不同的功能。 基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高分项目)基于MySQL、express框架、Vue3的光谷智慧交通系统源码+数据库+文档说明(高

    open3d python 给点云每个点设置不同的颜色

    open3d python 给点云每个点设置不同的颜色

    【电磁】基于matlab具有Mur吸收边界的区域的二维FDTD【含Matlab源码 9136期】.mp4

    Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    HengCe-18900-2024-2030中国室内木门市场现状研究分析与发展前景预测报告-样本.docx

    HengCe-18900-2024-2030中国室内木门市场现状研究分析与发展前景预测报告-样本.docx

    (源码)基于ASP.NET Web API的供应链管理系统.zip

    # 基于ASP.NET Web API的供应链管理系统 ## 项目简介 供应链管理系统(SCM)是一个基于ASP.NET Web API框架开发的企业级应用,旨在帮助企业高效管理供应链中的各个环节。系统涵盖了供应商管理、采购管理、库存管理、订单管理等多个模块,通过API接口实现数据的增删改查操作,确保供应链的顺畅运作。 ## 项目的主要特性和功能 1. 供应商管理 供应商信息的增删改查操作。 供应商联系人管理。 供应商评级和分类管理。 2. 采购管理 采购订单的创建、编辑和删除。 采购产品的状态管理。 采购合同的生成和管理。 3. 库存管理 库存产品的入库和出库管理。 库存状态的实时监控。 4. 订单管理 订单的创建、编辑和删除。 订单状态的跟踪和管理。 5. 用户管理 用户登录和权限管理。 用户角色的分配和管理。

    基于SpringBoot的“学生考勤管理系统”的设计与实现(源码+数据库+文档+PPT).zip

    系统主要包括首页,个人中心,学生管理,教师管理,班级信息管理,课程信息管理,签到信息管理,考勤信息管理,请假信息管理,考勤统计管理等功能模块。

    维特协议标准精度示例程序c.zip

    c语言

    DICOM文件+DX放射平片-数字X射线图像DICOM测试文件

    DICOM文件+DX放射平片—数字X射线图像DICOM测试文件,文件为.dcm类型DICOM图像文件文件,仅供需要了解DICOM或相关DICOM开发的技术人员当作测试数据或研究使用,请勿用于非法用途。

    C#ASP.NET仓储管理系统源码数据库 SQL2008源码类型 WebForm

    ASP.NET仓储管理系统源码 一、 程序说明 该程序大部分使用于生产制造厂,其中结合了制造厂的采购,销售,生产等. 开源部分是仓库系统后台管理系 统, 在给客户实施的过程中利用到了很多硬件设备, 设计到Wince系统,Android系统等PDA设备,各种打印 机,条码打印机,感应设备等,而且这些可能在整个项目中占据主导,而后台管理系统只是辅助作用的。 该程序使用的.NET MVC开发,大量使用到了jQuery,以及Bootstrap。 数据库使用了SQL Server.

    【小程序毕业设计】面向文艺影视社群的微信小程序源码(完整前后端+mysql+说明文档).zip

    环境说明: 开发语言:Java/php JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea 小程序框架:uniapp/原生小程序 开发工具:HBuilder X/微信开发者

    Skia-macOS-Release-arm64.zip

    Skia-macOS-Release-arm64.zip aseprite 安装所需依赖安装包

    中国品牌日研究特辑-数字经济时代下中国品牌高质量发展之用户趋势.pdf

    中国品牌日研究特辑-数字经济时代下中国品牌高质量发展之用户趋势.pdf

    生成xcinsphfs0exefsromfscertifateticket转储从任天堂Switch游戏卡和安装的SDe.zip

    c语言

    一个基于qt开发的包含各种基础图像处理技术的桌面应用,图像处理算法基于halcon,有直接调用halcon脚本和执行halcon

    一个基于qt开发的包含各种基础图像处理技术的桌面应用,图像处理算法基于halcon,有直接调用halcon脚本和执行halcon C++代码方式。 导入图片,预处理,滤波,边缘检测,阈值分割,形态学变换,图像增强,图像变换,

    【9312】基于Springboot+vue的精品水果线上销售网站的设计与实现.zip

    技术选型 【后端】:Java 【框架】:springboot 【前端】:vue 【JDK版本】:JDK1.8 【服务器】:tomcat7+ 【数据库】:mysql 5.7+ 项目包含前后台完整源码。 项目都经过严格调试,确保可以运行! 具体项目介绍可查看博主文章或私聊获取 助力学习实践,提升编程技能,快来获取这份宝贵的资源吧! 在当今快速发展的信息技术领域,技术选型是决定一个项目成功与否的重要因素之一。基于以下的技术栈,我们为您带来了一份完善且经过实践验证的项目资源,让您在学习和提升编程技能的道路上事半功倍。以下是该项目的技术选型和其组件的详细介绍。 在后端技术方面,我们选择了Java作为编程语言。Java以其稳健性、跨平台性和丰富的库支持,在企业级应用中处于领导地位。项目采用了流行的Spring Boot框架,这个框架以简化Java企业级开发而闻名。Spring Boot提供了简洁的配置方式、内置的嵌入式服务器支持以及强大的生态系统,使开发者能够更高效地构建和部署应用。 前端技术方面,我们使用了Vue.js,这是一个用于构建用户界面的渐进式JavaScript框架。Vue以其易上手、灵活和性能出色而受到开发者的青睐,它的组件化开发思想也有助于提高代码的复用性和可维护性。 项目的编译和运行环境选择了JDK 1.8。尽管Java已经推出了更新的版本,但JDK 1.8依旧是一种成熟且稳定的选择,广泛应用于各类项目中,确保了兼容性和稳定性。 在服务器方面,本项目部署在Tomcat 7+之上。Tomcat是Apache软件基金会下的一个开源Servlet容器,也是应用最为广泛的Java Web服务器之一。其稳定性和可靠的性能表现为Java Web应用提供了坚实的支持。 数据库方面,我们采用了MySQL 5.7+。MySQL是一种高效、可靠且使用广泛的关系型数据库管理系统,5.7版本在性能和功能上都有显著的提升。 值得一提的是,该项目包含了前后台的完整源码,并经过严格调试,确保可以顺利运行。通过项目的学习和实践,您将能更好地掌握从后端到前端的完整开发流程,提升自己的编程技能。欢迎参考博主的详细文章或私信获取更多信息,利用这一宝贵资源来推进您的技术成长之路!

    C#固定资产管理系统源码(带条码打印)数据库 SQL2008源码类型 WinForm

    固定资产管理系统源码(带条码打印) 功能介绍 1.基本信息管理:包括资产分类,基本资料,资产编号规则,保存列间距和选择资产显示列等功能; 2.固定资产管理:包括资产增加,资产更新,资产删除,资产清理,资产清理查询和资产折旧核算 3.数据维护管理:包系统数据初始化,系统数据备份/恢复等功能; 4.系统维护管理:包括本单位信息和操作员管理等功能; 5.系统辅助工具:包括计算器和记事本等功能; 6.条码打印:对条码进行打印等功能;

Global site tag (gtag.js) - Google Analytics