画布中添加背景图案
我们可以使用如下方法来添加背景图案:
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
对象的strokeStyle
或fillStyle
属性值即可。
下面,我们就来详细了解一下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>
值得注意的是,如上述代码所示,如果createPattern()
方法的image参数值不是当前页面一个已经存在的Image对象或Canvas对象,那么我们需要等待浏览器将图片加载完毕后才能调用createPattern()
方法及后续操作,否则将无法正确显示对应的图形。
接着,我们将createPattern()
方法的第2个参数repetitionStyle
改为其他可能的值并分别查看对应的图形效果。
此外,有一点尤为需要注意,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上的,只是默认情况下,这些图像都不可见。当我们绘制图形时,该图形所在区域的图像才会显示出来。你可以参考下面几个例子,以帮助理解。
注意:到目前为止,FireFox浏览器对该对象的支持存在bug,你所期望的效果可能和实际显示效果不一致。
相关推荐
此外,Canvas也支持渐变和模式填充,通过创建CanvasGradient或CanvasPattern对象,可以为图形添加平滑的色彩过渡或使用重复的图案填充。 总结起来,HTML5 Canvas 提供了一个强大而灵活的图形绘制平台,使得开发者...
这里,我们设置了填充颜色为蓝色(`context.fillStyle = 'blue'`),并使用 `fillRect()` 方法绘制了一个矩形,其左上角坐标为 (10, 20),宽高分别为 200 和 100。 #### 三、Canvas2D 规范与实现 Canvas2D 的规范...
基于springboot大学生就业信息管理系统源码数据库文档.zip
基于java的驾校收支管理可视化平台的开题报告
时间序列 原木 间隔5秒钟 20241120
毕业设计&课设_基于 Vue 的电影在线预订与管理系统:后台 Java(SSM)代码,为毕业设计项目.zip
基于springboot课件通中小学教学课件共享平台源码数据库文档.zip
基于java的网上购物商城的开题报告
Delphi人脸检测与识别Demo1fdef-main.zip
基于java的咖啡在线销售系统的开题报告
基于java的自助医疗服务系统的开题报告.docx
内容概要:本文档全面介绍了Visual Basic(VB)编程语言的基础知识和高级应用。首先概述了VB的基本特性和开发环境,随后详细讲述了VB的数据类型、变量、运算符、控制结构、数组、过程与函数、变量作用域等内容。接着介绍了窗体设计、控件使用、菜单与工具栏的设计,文件操作、数据库访问等关键知识点。最后讨论了VB的学习方法、发展历史及其在桌面应用、Web应用、数据库应用、游戏开发和自动化脚本编写等领域的广泛应用前景。 适合人群:初学者和中级程序员,尤其是希望快速掌握Windows桌面应用开发的人群。 使用场景及目标:①掌握VB的基础语法和开发环境;②学会使用VB创建复杂的用户界面和功能完整的应用程序;③理解数据库操作、文件管理和网络编程等高级主题。 其他说明:Visual Basic是一种简单易学且功能强大的编程语言,尤其适合用于开发Windows桌面应用。文中不仅覆盖了基础知识,还包括了大量的实用案例和技术细节,帮助读者快速提升编程技能。
基于java的疫情期间高校防控系统开题报告.docx
基于springboot+vue社区老年人帮扶系统源码数据库文档.zip
基于java的超市商品管理系统的开题报告.docx
基于SpringBoot房屋买卖平台源码数据库文档.zip
xdu限通院23微处理器系统与应用大作业(两只老虎),适应于汇编语言keil软件,
<项目介绍> - 新闻类网站系统,基于SSM(Spring、Spring MVC、MyBatis)+MySQL开发,高分成品毕业设计,附带往届论文 - 不懂运行,下载完可以私聊问,可远程教学 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------
基于java的学生网上请假系统的开题报告.docx
社会经济繁荣发展的今天,电子商务得到了飞速发展,网上交易越来越彰显出其独特的优越性,在人们的日常生活中,出现了各种类型的交易网站。其中一个就是车辆易主交易网站,它是一个服务于用户买卖二手车辆的交易网站,为用户提供了平等互利、方便快捷的网上交易平台,通过这一类型的网站,用户可自由出售和购买车辆。 本课题主要根据车辆本身的特性,充分发挥互联网的特点与优势,构建一个以二手车辆为商品、基于互联网平台的车辆易主业务交易管理系统,并根据车辆易主业务交易管理系统的应用需求,进行需求分析,进而对网站系统作规划设计。采用IDEA为运行平台,以SSH为框架,运用HTML语言、JSP技术、MySql数据库、JSP与后台数据库链接等关键技术建设二手车网上交易系统,构建车辆易主交易系统的会员注册与登录,网站首页展示、用户发布商品车辆,用户求购商品车辆,分页浏览、购物系统、用户后台管理、管理员用户后台管理等功能,并使这些功能得以实现并更好为用户服务。网站整体构建完成且测试成功后,用户可以进入网站进行注册、登录,登录后,用户可以在网站上发布自己的闲置车辆或者寻找想要购买的车辆,还可以收藏车辆,管理发布和收藏的车辆,