持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

端午节和什么最配，当然是粽子啦，这一天是一定要吃粽子的哦，不管是鲜肉粽还是甜枣粽，希望所有的粽子都是开心的味道。今天带大家用canvas画许多粽子（开开心心过端午）：

先画一个粽子

<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const img = new Image();
    img.src = './images/zongzi.png';
    img.onload = () => {
        ctx.drawImage(img, 0, 0, 100, 100);
    }
</script>

页面左上角出现一个可爱的粽子宝宝：

封装绘制方法

img.onload = () => {
    drawZongZi(0, 0, 100);
}
function drawZongZi(x, y, size) {y
    ctx.drawImage(img, x, y, size, size);
}

我们的粽子总是方形的，所以可以只传一个参数。图片也不用一直new，一个就行了。

多画几个粽子

img.onload = () => {
    for (let i = 0; i < 5; i++) {
        drawZongZi(i * 100, 0, 100)
    }
}

画满整个屏幕

let x = window.innerWidth / 100;
let y = window.innerHeight / 100;
img.onload = () => {
    for (let i = 0; i < x; i++) {
        for (let j = 0; j < y; j++) {
            drawZongZi(i * 100, j * 100, 100);
        }
    }
}

封装一下

function drawManyZongzi(size) {
    let x = window.innerWidth / size;
    let y = window.innerHeight / size;
    img.onload = () => {
        for (let i = 0; i < x; i++) {
            for (let j = 0; j < y; j++) {
                drawZongZi(i * size, j * size, size);
            }
        }
    }
}
drawManyZongzi(50);

人手一个粽子

drawManyZongzi(1);

wtf??? 人手一个粽子我麻了，密密麻麻的都成黑色的了。

低调点

drawManyZongzi(5);

嘻嘻，这么多粽子够掘金的小伙伴分了吧。不用谢，不够我在new~ 真是粽情粽义啊我。晚安，大佬们

端午节给大家发粽子了