canvas 上的双图像背景大小不同

Question

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

我对javascript还是个新手，我的代码是由我在google上找到的点点滴滴组成的，但我似乎无法获得最上面的图像无论出于何种原因与底部图像共享相同的分辨率和图像尺寸。

这是我的代码笔的 link：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。

代码笔：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>

canvas 上的双图像背景大小不同

Double image background on canvas not sharing the same size

html

javascript

css

canvas