canvas的createPattern()可以用于绘制重复图案,它可以接收image元素、canvas元素或video元素作为图案参数,并且可以传入如何重复图案的字符串参数:
- repeat —— 为整个区域绘制重复图案
- repeat-x —— 只在x方向绘制重复图案
- repeat-y —— 只在y方向绘制重复图案
- no-repeat —— 不重复,只绘制一张图案
来看一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绘制重复图案</title>
<style>
body {
background: #eee;
}
#canvas {
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);