如何实现JavaScript中图片的平铺效果？

JS图片平铺

简介

在网页设计中，我们经常需要将一张小图片平铺在整个背景上，以达到美化页面的效果，在CSS3之前，我们通常使用backgroundimage和backgroundrepeat属性来实现这个效果，但在一些复杂的场景下，比如需要动态改变平铺的图片或者平铺的方式等，使用CSS就显得力不从心了，这时，我们可以使用JavaScript来实现更复杂的图片平铺效果。

源码解析

假设我们有一个小的png图片，我们想要将它平铺在整个页面的背景上，我们可以使用以下的JavaScript代码：

// 获取body元素
var body = document.getElementsByTagName('body')[0];
// 创建一个新的img元素
var img = document.createElement('img');
// 设置img的src属性为我们的平铺图片
img.src = 'tile.png';
// 当图片加载完成后
img.onload = function() {
    // 创建一个canvas元素
    var canvas = document.createElement('canvas');
    // 设置canvas的宽度和高度为页面的宽度和高度
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 获取canvas的2d绘图上下文
    var ctx = canvas.getContext('2d');
    // 计算平铺的数量
    var tileNumX = Math.ceil(canvas.width / img.width);
    var tileNumY = Math.ceil(canvas.height / img.height);
    // 循环绘制平铺的图片
    for (var i = 0; i < tileNumX; i++) {
        for (var j = 0; j < tileNumY; j++) {
            ctx.drawImage(img, i * img.width, j * img.height);
        }
    }
    // 将canvas的内容绘制到body的背景上
    body.style.backgroundImage = canvas.toDataURL();
}
// 将img元素添加到body中
body.appendChild(img);

代码首先获取了body元素，然后创建了一个新的img元素，并设置了它的src属性为我们想要平铺的图片，当图片加载完成后，我们创建了一个新的canvas元素，并设置了它的宽度和高度为页面的宽度和高度，我们获取了canvas的2d绘图上下文，并计算了平铺的数量，我们循环绘制了平铺的图片，我们将canvas的内容绘制到了body的背景上。

相关问题与解答

Q1: 如果我想要改变平铺的图片，我该怎么做？

A1: 你只需要改变img元素的src属性即可，你可以将它改为’another_tile.png’。

Q2: 如果我想要改变平铺的方式，比如只在一个方向上平铺，我该怎么做？

A2: 你可以通过修改平铺数量的计算方式来实现，如果你只想在水平方向上平铺，你可以将tileNumY设置为1。