如何在Canvas中平铺图像

225 字

1 分钟

如何在Canvas中平铺图像

2018-11-28

2024-07-20

博客

canvas

/

javascript

如果我们要在Canvas中只用个方块做出这样的效果：

开始#

首先我们先创建一个画布，大小自定

1
<body>
2
  <canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
3
<body>

我这里的长宽为2000*2000，背景颜色为白色，边框是3px的红色直线。

接着我们制作一个用来平铺的图像，我制作的图像是一个110110的粉红色的方形，其中外边框10px为透明区域，方形实际可见面积为100100。

画布做好后我们开始写JS的部分：

1
  function draw() {
2
    var canvas = document.getElementById("canvas");
3
    if (canvas == null) return false;
4
    var tile = canvas.getContext("2d");
5
    var img = new Image();
6
    img.src = "YourImage.png";
7
    img.onload = function () {
8
      var pattern = tile.createPattern(img, "repeat");
9
      tile.fillStyle = pattern;
10
      tile.fillRect(0, 0, 2000, 2000);
11
    };
12
  }

写好JS部分后我们要把加载放到 <body> 中

1
<body onload="draw('canvas')">
2
  <canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
3
</body>