画布上的双图像背景不共享相同的大小

Question

我正在尝试让网站上的一个部分有两个背景图像，当指针在屏幕上移动时，它们会显示底部的一个。

我还是 javascript 的新手，我的代码是由我在谷歌上找到的零碎组成的，但我似乎无法让顶部图像共享相同的分辨率和图像大小原因作为底部图像。

这是我的 codepen 的链接：https://codepen.io/Awktopus/pen/zYwKOKO

这是我的代码：

HTML：

<canvas id="main-canvas" id="canvas-size" class="background-size"></canvas>

<image src="https://i.imgur.com/PbGAAIy.jpg" id="upper-image" class="hidden-bg"></img>

<image src="https://i.imgur.com/Gx14sKW.jpg" id="lower-image" class="hidden-bg"></img>

CSS：

.hidden-bg {
  display: none;
}

JS：

var can = document.getElementById('main-canvas');
var ctx = can.getContext('2d');
can.width  = window.innerWidth;
can.height  = window.innerWidth / 2;
var upperImg = document.getElementById("upper-image");
var lowerImg = document.getElementById("lower-image");
var pat = ctx.createPattern(upperImg, "no-repeat");
var canvas = ctx.canvas ;
var hRatio = canvas.width  / lowerImg.width    ;
var vRatio =  canvas.height / lowerImg.height  ;
   var ratio  = Math.max ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - lowerImg.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - lowerImg.height*ratio ) / 2;


can.addEventListener('mousemove', function(e) {
    var mouse = getMouse(e, can);
    redraw(mouse);
}, false);


function redraw(mouse) {
    can.width = can.width;
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.drawImage(lowerImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);  
    ctx.beginPath();
    ctx.rect(0,0,can.width,can.height);
    ctx.arc(mouse.x, mouse.y, 250, 0, Math.PI*2, true)
    ctx.clip();
    ctx.fillStyle = pat;
    ctx.fillRect(0, 0, lowerImg.width, lowerImg.height, centerShift_x, centerShift_y, lowerImg.width*ratio, lowerImg.height*ratio);
}

var img = new Image();
img.onload = function() {
    redraw({x: -500, y:-500})
}

function getMouse(e, canvas) {
    var element = canvas,
        offsetX = 0,
        offsetY = 0,
        mx, my;

if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    return {
        x: mx,
        y: my
    };
}

Answer 1

如果我理解这一点，您将需要设置宽度和高度并使用drawImage() 绘制上部图像。只需使用与 lowerImage 相同的比率即可。无需为此使用createPattern。

codepen：https://codepen.io/jfirestorm44/pen/BaRLoxX

var can = document.getElementById('main-canvas');
var ctx = can.getContext('2d');
can.width  = window.innerWidth;
can.height  = window.innerWidth / 2;
var upperImg = document.getElementById("upper-image");
var lowerImg = document.getElementById("lower-image");
//var pat = ctx.createPattern(upperImg, "no-repeat");
var canvas = ctx.canvas ;
var hRatio = canvas.width  / lowerImg.width    ;
var vRatio =  canvas.height / lowerImg.height  ;
   var ratio  = Math.max ( hRatio, vRatio );
   var centerShift_x = ( canvas.width - lowerImg.width*ratio ) / 2;
   var centerShift_y = ( canvas.height - lowerImg.height*ratio ) / 2;


can.addEventListener('mousemove', function(e) {
    var mouse = getMouse(e, can);
    redraw(mouse);
}, false);


function redraw(mouse) {
    can.width = can.width;
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.drawImage(lowerImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);
  
    ctx.beginPath();
    ctx.rect(0,0,can.width,can.height);
    ctx.arc(mouse.x, mouse.y, 250, 0, Math.PI*2, true)
    ctx.clip();
    ctx.drawImage(upperImg, 0,0, lowerImg.width, lowerImg.height, centerShift_x,centerShift_y,lowerImg.width*ratio, lowerImg.height*ratio);
}

var img = new Image();
img.onload = function() {
    redraw({x: -500, y:-500})
}

function getMouse(e, canvas) {
    var element = canvas,
        offsetX = 0,
        offsetY = 0,
        mx, my;

if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    return {
        x: mx,
        y: my
    };
}

.hidden-bg {
  display: none;
}

<canvas id="main-canvas" id="canvas-size" class="background-size"></canvas>

<image src="https://i.imgur.com/PbGAAIy.jpg" id="upper-image" class="hidden-bg"></img>

<image src="https://i.imgur.com/Gx14sKW.jpg" id="lower-image" class="hidden-bg"></img>