<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片依次均匀填充canvas</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const images = [
{ src: '../src/assets/images/cjyy.jpeg', x: 0, y: 0 },
{ src: '../src/assets/images/human.png', x: 0, y: 0 },
{ src: '../src/assets/images/cjyy.jpeg', x: 0, y: 0 },
{ src: '../src/assets/images/human.png', x: 0, y: 0 },
{ src: '../src/assets/images/cjyy.jpeg', x: 0, y: 0 },
{ src: '../src/assets/images/human.png', x: 0, y: 0 },
// ... 添加更多图片及其在canvas上的位置
];
const totalImages = images.length;
const canvasWidth = canvas.clientWidth; // 获取Canvas当前宽度(假设它已正确设置CSS样式)
const canvasHeight = canvas.clientHeight; // 获取Canvas当前宽度(假设它已正确设置CSS样式)
function loadImage(image, index, totalImages) {
const img = new Image();
img.src = image.src;
img.onload = () => {
const imgWidth = canvasWidth / totalImages; // 平均分配宽度
const imgHeight = canvasHeight; // 高度设定为Canvas高度
const x = index * imgWidth; // 计算图片在Canvas上的水平位置
drawImage(img, x, 0, imgWidth, imgHeight); // 绘制图片
};
}
for (let i = 0; i < totalImages; i++) {
loadImage(images[i], i, totalImages);
}
function drawImage(img, x, y, width, height) {
ctx.drawImage(img, x, y, width, height);
}
</script>
</body>
</html>
图片依次均匀填充canvas
最新推荐文章于 2024-08-22 11:06:05 发布