所以這個想法來自這里我只是提供了一個陣列來在影像中創建多波效果，但它不是那樣作業的。因為我想做的是在一個陣列中執行它，但它不作業并且無論如何都沒有創建影像加載這里是鏈接。 關聯
這是代碼
const listImages = ["./img/Leo.jpg","./img/Einstein.jpg","./img/Newton.jpg"]
var canvas = document.querySelectorAll("canvas")
canvas.forEach((elem,i) => {
var img = new Image();
img.onload = waves;
img.src = listImages[0]
console.log(elem,listImages[0])
function waves(image) {
var ctx = elem.getContext("2d"),
w = elem.width,
h = elem.height;
console.log(ctx,w,h)
ctx.drawImage(this, 0, 0);
var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06), // osc. for vert
o4 = new Osc(0.08), o5 = new Osc(0.04), o6 = new Osc(0.067), // osc. for hori
// source grid lines
x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h,
// cache source widths/heights
sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,
vcanvas = document.createElement("canvas"), // off-screen canvas for 2. pass
vctx = vcanvas.getContext("2d");
vcanvas.width = w; vcanvas.height = h; // set to same size as main canvas
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y ) {
// segment positions
var lx1 = x1 o1.current(y * 0.2) * 2.5,
lx2 = x2 o2.current(y * 0.2) * 2,
lx3 = x3 o3.current(y * 0.2) * 1.5,
// segment widths
w0 = lx1,
w1 = lx2 - lx1,
w2 = lx3 - lx2,
w3 = x4 - lx3;
// draw image lines
ctx.drawImage(img, x0, y, sw0, 1, 0 , y, w0 , 1);
ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 0.5, 1);
ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 0.5, 1);
ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 0.5, 1);
}
// pass 1 done, copy to off-screen canvas:
vctx.clearRect(0, 0, w, h); // clear off-screen canvas (only if alpha)
vctx.drawImage(canvas, 0, 0);
ctx.clearRect(0, 0, w, h); // clear main (onlyif alpha)
for (var x = 0; x < w; x ) {
var ly1 = y1 o4.current(x * 0.32),
ly2 = y2 o5.current(x * 0.3) * 2,
ly3 = y3 o6.current(x * 0.4) * 1.5;
ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0 , 1, ly1);
ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 0.5);
ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 0.5);
ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1, y4 - ly3 0.5);
}
requestAnimationFrame(loop);
})();
}
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame = 0.002 * speed;
return Math.sin(frame x * speed * 10);
};
}
})
如您所見，我確實使用了一個listImages并且canvas因為我想在我的螢屏中呼叫添加三個畫布。這樣我的螢屏上就可以有三個影像，但問題是它沒有出現在我的螢屏或控制臺中......我在這里錯了什么？我在 javascript 中創建了這個，因為在 reactjs 中會復雜得多。
但是讓我將代碼分解成這樣的東西，以便你們更好地理解。
This will be my loop for calling the oscillation animation image effect.
//const listImages = ["./img/Leo.jpg","./img/Einstein.jpg","./img/Newton.jpg"]
//var canvas = document.querySelectorAll("canvas")
var img = new Image();
img.onload = waves;
img.src = "./img/Newton.jpg";
function waves() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height;
ctx.drawImage(this, 0, 0);
var o1 = new Osc(0.05), o2 = new Osc(0.03), o3 = new Osc(0.06), // osc. for vert
o4 = new Osc(0.08), o5 = new Osc(0.04), o6 = new Osc(0.067), // osc. for hori
// source grid lines
x0 = 0, x1 = w * 0.25, x2 = w * 0.5, x3 = w * 0.75, x4 = w,
y0 = 0, y1 = h * 0.25, y2 = h * 0.5, y3 = h * 0.75, y4 = h,
// cache source widths/heights
sw0 = x1, sw1 = x2 - x1, sw2 = x3 - x2, sw3 = x4 - x3,
sh0 = y1, sh1 = y2 - y1, sh2 = y3 - y2, sh3 = y4 - y3,
vcanvas = document.createElement("canvas"), // off-screen canvas for 2. pass
vctx = vcanvas.getContext("2d");
vcanvas.width = w; vcanvas.height = h; // set to same size as main canvas
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y ) {
// segment positions
var lx1 = x1 o1.current(y * 0.2) * 2.5,
lx2 = x2 o2.current(y * 0.2) * 2,
lx3 = x3 o3.current(y * 0.2) * 1.5,
// segment widths
w0 = lx1,
w1 = lx2 - lx1,
w2 = lx3 - lx2,
w3 = x4 - lx3;
// draw image lines
ctx.drawImage(img, x0, y, sw0, 1, 0 , y, w0 , 1);
ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 0.5, 1);
ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 0.5, 1);
ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 0.5, 1);
}
// pass 1 done, copy to off-screen canvas:
vctx.clearRect(0, 0, w, h); // clear off-screen canvas (only if alpha)
vctx.drawImage(canvas, 0, 0);
ctx.clearRect(0, 0, w, h); // clear main (onlyif alpha)
for (var x = 0; x < w; x ) {
var ly1 = y1 o4.current(x * 0.32),
ly2 = y2 o5.current(x * 0.3) * 2,
ly3 = y3 o6.current(x * 0.4) * 1.5;
ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0 , 1, ly1);
ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 0.5);
ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 0.5);
ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1, y4 - ly3 0.5);
}
requestAnimationFrame(loop);
})();
}
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame = 0.002 * speed;
return Math.sin(frame x * speed * 10);
};
}
uj5u.com熱心網友回復：
您的waves函式在 DOM 中查詢它擁有的第一個畫布元素。
如果您想在同一個檔案中多次運行該效果，則必須將影像鏈接到特定的畫布元素。有很多方法可以做到這一點；這是一個：
- 向檔案添加 3 個畫布元素
- 回圈遍歷每個影像源
- 用于
document.querySelectorAll("canvas")[i]選擇圖源索引對應的畫布
const listImages = [
// Leo
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg/170px-Leonardo_da_Vinci_-_presumed_self-portrait_-_WGA12798.jpg",
// Einstein
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Einstein_1921_by_F_Schmutzer_-_restoration.jpg/220px-Einstein_1921_by_F_Schmutzer_-_restoration.jpg",
// Newton
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Portrait_of_Sir_Isaac_Newton,_1689.jpg/220px-Portrait_of_Sir_Isaac_Newton,_1689.jpg"
]
listImages.forEach((src, i) => {
var img = new Image();
img.onload = waves;
img.src = src;
function waves() {
var canvas = document.querySelectorAll("canvas")[i],
ctx = canvas.getContext("2d"),
w = canvas.width,
h = canvas.height;
ctx.drawImage(this, 0, 0);
var o1 = new Osc(0.05),
o2 = new Osc(0.03),
o3 = new Osc(0.06), // osc. for vert
o4 = new Osc(0.08),
o5 = new Osc(0.04),
o6 = new Osc(0.067), // osc. for hori
// source grid lines
x0 = 0,
x1 = w * 0.25,
x2 = w * 0.5,
x3 = w * 0.75,
x4 = w,
y0 = 0,
y1 = h * 0.25,
y2 = h * 0.5,
y3 = h * 0.75,
y4 = h,
// cache source widths/heights
sw0 = x1,
sw1 = x2 - x1,
sw2 = x3 - x2,
sw3 = x4 - x3,
sh0 = y1,
sh1 = y2 - y1,
sh2 = y3 - y2,
sh3 = y4 - y3,
vcanvas = document.createElement("canvas"), // off-screen canvas for 2. pass
vctx = vcanvas.getContext("2d");
vcanvas.width = w;
vcanvas.height = h; // set to same size as main canvas
(function loop() {
ctx.clearRect(0, 0, w, h);
for (var y = 0; y < h; y ) {
// segment positions
var lx1 = x1 o1.current(y * 0.2) * 2.5,
lx2 = x2 o2.current(y * 0.2) * 2,
lx3 = x3 o3.current(y * 0.2) * 1.5,
// segment widths
w0 = lx1,
w1 = lx2 - lx1,
w2 = lx3 - lx2,
w3 = x4 - lx3;
// draw image lines
ctx.drawImage(img, x0, y, sw0, 1, 0, y, w0, 1);
ctx.drawImage(img, x1, y, sw1, 1, lx1 - 0.5, y, w1 0.5, 1);
ctx.drawImage(img, x2, y, sw2, 1, lx2 - 0.5, y, w2 0.5, 1);
ctx.drawImage(img, x3, y, sw3, 1, lx3 - 0.5, y, w3 0.5, 1);
}
// pass 1 done, copy to off-screen canvas:
vctx.clearRect(0, 0, w, h); // clear off-screen canvas (only if alpha)
vctx.drawImage(canvas, 0, 0);
ctx.clearRect(0, 0, w, h); // clear main (onlyif alpha)
for (var x = 0; x < w; x ) {
var ly1 = y1 o4.current(x * 0.32),
ly2 = y2 o5.current(x * 0.3) * 2,
ly3 = y3 o6.current(x * 0.4) * 1.5;
ctx.drawImage(vcanvas, x, y0, 1, sh0, x, 0, 1, ly1);
ctx.drawImage(vcanvas, x, y1, 1, sh1, x, ly1 - 0.5, 1, ly2 - ly1 0.5);
ctx.drawImage(vcanvas, x, y2, 1, sh2, x, ly2 - 0.5, 1, ly3 - ly2 0.5);
ctx.drawImage(vcanvas, x, y3, 1, sh3, x, ly3 - 0.5, 1, y4 - ly3 0.5);
}
requestAnimationFrame(loop);
})();
}
function Osc(speed) {
var frame = 0;
this.current = function(x) {
frame = 0.002 * speed;
return Math.sin(frame x * speed * 10);
};
}
});<canvas width="170" height="265"></canvas>
<canvas width="220" height="265"></canvas>
<canvas width="220" height="289"></canvas>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491213.html
標籤：javascript 反应 数组 图片 帆布