|
Сообщение от voraa
|
|
Я не вижу всей задачи.
|
Voraa, я максимально упростил код представленный выше до сути настоящего вопроса:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
[data-id="red"] {
height: 100px;
width: 100px;
border-top: 30px solid #ff0000;
border-right: 30px solid #ff0000;
border-bottom: 30px solid #ff0000;
border-left: 30px solid #ff0000;
}
[data-id="blue"] {
height: 100px;
width: 100px;
border-top: 30px solid #0000ff;
border-right: 30px solid #0000ff;
border-bottom: 30px solid #0000ff;
border-left: 30px solid #0000ff;
}
</style>
</head>
<body>
<script>
function shuffle(array) {
return array;
}
const x = 150;
const y = 150;
const w = 2;
const images = [
"https://loremflickr.com/150/150/girl?random=1",
"https://loremflickr.com/150/150/dog?random=1",
"https://loremflickr.com/150/150/car?random=1",
"https://loremflickr.com/150/150/kitten?random=1"
];
const h = Math.ceil(images.length / w);
const canvas = Object.assign(document.createElement('canvas'), {
width: w * x,
height: h * y
});
document.body.prepend(canvas);
const ctx = canvas.getContext('2d')
const createImg = () => Promise.all(
shuffle(images).map((src, i) => new Promise(
(onload) => Object.assign(new Image(), {
src,
onload
})
).then(({
target
}) => {
const hPos = Math.floor(i / w);
const wPos = i - (hPos * w);
ctx.drawImage(
target,
wPos * x,
hPos * y,
x,
y
)
}))
);
createImg()
</script>
</body>
</html>
Теперь, например хотелось бы, чтобы в массиве скрипта вместо двух изображений были две рамочки ([data-id="red"] и [data-id="blue"] , которые прописаны в стилях.