canvas笔记-设置底纹(createPattern相关)

createPattern(img, repeat-style)

函数中第二个参数可以填写4个值，分别为：

repeat-style: no-repeat、repeat-x、repeat-y、repeat

如下模板代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");let backGroundImage = new Image();backGroundImage.src = "img/bg.jpg";backGroundImage.onload = function(){let pattern = context.createPattern(backGroundImage, "no-repeat");context.fillStyle = pattern;context.fillRect(0, 0, 800, 800);}}</script></body>
</html>

当style为no-repeat时：

let pattern = context.createPattern(backGroundImage, "no-repeat");

程序运行截图如下：

当style为repeat-x时：

let pattern = context.createPattern(backGroundImage, "repeat-x");

当style为repeat-y时：

let pattern = context.createPattern(backGroundImage, "repeat-y");

当style为repeat时：

let pattern = context.createPattern(backGroundImage, "repeat");

canvas笔记-设置底纹(createPattern相关)相关推荐

学习Canvas基础-圆柱渐变、设置底纹（createPattern）
1.圆柱渐变 // createconicgradient()方法在给定坐标的点周围创建渐变. // createConicGradient(startAngle, x, y) // 参数: // s ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
Python笔记_07_列表的相关操作_列表相关函数_深浅拷贝_字典相关函数_集合相关函数_冰冻集合
笔记目录列表的相关操作列表的拼接(同元组) 列表的重复 (同元组) 列表的切片 (同元组) 列表的获取 (同元组) 列表的修改 (可切片) 列表的删除 ( 可切片 ) 列表的相关函数 append ...
计算机中文字底纹咋操作,电脑word软件怎么为插入的表格设置底纹
电脑word软件怎么为插入的表格设置底纹腾讯视频/爱奇艺/优酷/外卖充值4折起当我们在使用电脑的时候,如果需要处理文字的话,一般都会用到word软件,那么在word中,怎么为插入的表格添加底纹呢 ...
HALCON 21.11：深度学习笔记---设置超参数(5)
HALCON 21.11:深度学习笔记---设置超参数(5) HALCON 21.11.0.0中,实现了深度学习方法.关于超参数的有关设置内容如下: 不同的DL方法是为不同的任务设计的,它们的构建方式 ...
Microsoft Word 设置底纹
Microsoft Word 设置底纹 1. 打开文档页面,选中特定段落或全部文档 2. 在"段落"中单击"边框"下三角按钮 3. 在列表中选择"边框 ...
iOS开发中使用UILabel设置字体的相关技巧小结
这篇文章主要介绍了iOS开发中UILabel设置字体的相关技巧小结,代码基于传统的Objective-C,需要的朋友可以参考下一.初始化复制代码代码如下: UILabel *myLabel = [ ...
Canvas如何设置一个渐变背景（支持从纯色切换到渐变，从渐变又切换到纯色)
Canvas如何设置一个渐变背景(支持从纯色切换到渐变,从渐变又切换到纯色) Canvas背景设置在开发中遇到一个需求:点击按钮切换canvas的背景,要求是从纯色到渐变,渐变到纯色.开发的时候发现 ...

canvas笔记-设置底纹(createPattern相关)

canvas笔记-设置底纹(createPattern相关)相关推荐

最新文章

热门文章