绘制鼠标轨迹时如何影响 canvas 后面的悬停元素
how to affect hover elements behind canvas when drawing mouse trail
我有 8 个弹性框列，当您将鼠标悬停在上面时，会显示图像。我想在鼠标在屏幕上移动时留下痕迹，所以我使用 onmousemove 在 canvas 上画线。但是，当我将 canvas 放在列的顶部时，将鼠标悬停在列上以显示照片不再有效。当我将鼠标悬停在列上时，如何在显示图像的同时留下鼠标线轨迹？谢谢！
<div class="container">
<canvas id="c" width="100%" height="100%" ></canvas>
<div class="row">
<div class="col" id="col1" >
<img class="media-overlay col-1 left top" id="img1"
src="imgs/port2.jpg" alt="port2" />
</div>
<div class="col" id="col2">
<img class="media-overlay col-1 left bottom " id="img2"
src="imgs/port1.jpg" alt="port1" />
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top"
src="imgs/land1.jpg" id="img3" alt="land1" />
</div>
</div>
<script> // this draws the line that follows the mouse movements
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;
c.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
//css
body {
margin: 0;
padding: 0;
height:100%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
.col {
height: 100%;
width: 300px;
position: relative;
flex-shrink: 0;
}
img.media-overlay {
position: absolute;
display:none;
}
.col:hover img {
display: block;
}
canvas {
display:block;
border: 1px solid;
position: absolute;
padding: 0;
margin:0;
z-index: 1;
}
尝试将所有事件侦听器添加到 #container 元素而不是 canvas，我假设 canvas 的宽度和高度相同。
将 pointer-events:none; 添加到 canvas 元素时。 属性 取消当前层上的所有用户事件并将它们传递给下面的元素。
// ====================== drawing canvas
const ctx = c.getContext('2d');
const $container= document.querySelector('#container');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
c.width = window.innerWidth;
c.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
// do your drawing stuff here//
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
$container.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
$container.onmouseup = c.onmouseleave = e => mouse_down = false;
$container.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
}
//================ randomizing columns====================
let mediaElements = [...document.getElementsByClassName("col")];
// this is where u assign the array for the list of src (or randomise it)
//array.forEach(function(currentValue, index, arr), thisValue)
//put the range in an array
function range(start, end) {
var ans = [];
for (let i = start; i <= end; i++) {
ans.push(i);
}
return ans;
}
//shuffle the array
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
//now shuffle order
let orderNumber = range(1, mediaElements.length);
let shuffled = shuffle(orderNumber);
//console.log(shuffled); // [5, 3, 1, 2, 4]
//assign order somehow lmao
mediaElements.forEach(y => {
// this is where u add or the src
// y is each of the img
//console.log(y)
y.style.order = shuffled.shift()
});
/* canvas {
border: 1px solid;
} */
/* CSS files add styling rules to your content */
html {
margin: 0px;
}
body {
margin: 0;
padding: 0;
margin-bottom: 0;
margin-top: 0;
/* background-color: black; */
height: 100%;
margin-top: 0%;
padding: 0%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
margin-left: 0px;
margin: 0px;
}
.col {
height: 100%;
width: 300px;
position: relative;
border-right: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
border-bottom: 0.5px #EDE7DD solid;
flex-shrink: 0;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
}
/* .col:hover {
background-color: pink;
} */
img.media-overlay {
position: absolute;
padding: 0;
margin: 0;
display: none;
border-bottom: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
}
.col:hover img {
display: block;
}
img.col-1 {
max-width: 300px;
}
img.col-2 {
max-width: 600.5px;
/* add border width 600 */
}
img.left {
left: 0;
}
img.right {
right: 0;
}
img.top {
top: 0;
border-top: 0px black solid;
}
img.bottom {
bottom: 0;
border-bottom: 0px black solid;
}
@media (max-width: 480px) {
/* ==============
row takes up the entire screen
need to take care of the images or media-overlays too
============== */
.col {
width: 100%;
}
/* ==============
columns turn into rows
need to take care of the images or media-overlays too
width of rows, and border (bottom)
============== */
/* .row {
flex-direction: column;
} */
}
h3 {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
/* color:#FFC6C0; */
font-family: nimbus-sans, sans-serif;
font-weight: 700;
font-style: normal;
}
p {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
font-family: nimbus-sans, sans-serif;
font-weight: 300;
font-style: normal;
}
.bottomText {
position: absolute;
bottom: 0;
z-index: -1;
}
canvas {
display: block;
border: 1px solid;
position: absolute;
padding: 0;
margin: 0;
z-index: 1;
pointer-events:none;
/* overflow: auto; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- nimbus sans -->
<!-- bold -->
<link rel="stylesheet" href="https://use.typekit.net/oub0bcu.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<label>
<input type="checkbox" id="check" checked style="display:none"/></label
><br />
<div class="container" id='container'>
<canvas id="c" width="100%" height="100%"></canvas>
<div class="row" id="row">
<div class="col" id="col1">
<h3>Abbie Lilley & Indiya Tupe</h3>
<p>
“Unearth is a campaign intending to inspire a deeper exploration and richer interactions with our surroundings
in order to apprehend a deeper embrace of natural and urban environments. Animating the lyrics of Nothing but
Flowers by Talking Heads, playful juxtapositions are at the heart of our environmental centred campaign;
investigating a place’s potential to transform typographic led interventions and inform visual language.”</p>
<img class="media-overlay col-1 left top" id="img1" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport2.jpg?v=1595172025095" alt="port2" />
</div>
<div class="col " id="col2">
<img class="media-overlay col-1 left bottom " id="img2" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport1.jpg?v=1595172012754" alt="port1" />
<div class= "bottomText">
<h3>Mayli Mountford</h3>
<p>
“An unconventional rebrand of 'Britishness' so it accurately represents contemporary ’British' Identity to
promote and represent all people and culture in the United Kingdom. An aspect I decided to rebrand was British
slang and language - there are typical British sayings but I knew there are other sayings from other cultures
that are spoken in the UK.
<br><br>People of different ethnicities have been born, grown up here, and consider themselves British and yet
the British identity does not represent them? Maybe Britain wouldn’t be so divided, if Britain actually
represented Britain?
</p>
</div>
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland1.jpg?v=1595171993148" id="img3" alt="land1" />
<h3>3</h3>
<p></p>
</div>
<div class="col" id="col4">
<img class="media-overlay col-1 right bottom " src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img4" alt="port3" />
<h3>4</h3>
<p></p>
</div>
<div class="col" id="col5">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img5" alt="land2" />
<h3>5</h3>
<p></p>
</div>
<div class="col" id="col6">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img6" alt="land2" />
<h3>6</h3>
<p></p>
</div>
<div class="col" id="col7">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img7" alt="land2" />
<h3>7</h3>
<p></p>
</div>
<div class="col" id="col8">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img8" alt="land2" />
<h3>8</h3>
<p></p>
</div>
</div>
</div>
</body>
</html>
阅读@t1m0n 的回答，我解决了我的问题。并且没有将 'pointer-events:none;' 添加到 canvas。只需设置 canvas 的 z-index 也可以。
我有 8 个弹性框列，当您将鼠标悬停在上面时，会显示图像。我想在鼠标在屏幕上移动时留下痕迹，所以我使用 onmousemove 在 canvas 上画线。但是，当我将 canvas 放在列的顶部时，将鼠标悬停在列上以显示照片不再有效。当我将鼠标悬停在列上时，如何在显示图像的同时留下鼠标线轨迹？谢谢！
<div class="container">
<canvas id="c" width="100%" height="100%" ></canvas>
<div class="row">
<div class="col" id="col1" >
<img class="media-overlay col-1 left top" id="img1"
src="imgs/port2.jpg" alt="port2" />
</div>
<div class="col" id="col2">
<img class="media-overlay col-1 left bottom " id="img2"
src="imgs/port1.jpg" alt="port1" />
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top"
src="imgs/land1.jpg" id="img3" alt="land1" />
</div>
</div>
<script> // this draws the line that follows the mouse movements
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;
c.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
//css
body {
margin: 0;
padding: 0;
height:100%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
}
.col {
height: 100%;
width: 300px;
position: relative;
flex-shrink: 0;
}
img.media-overlay {
position: absolute;
display:none;
}
.col:hover img {
display: block;
}
canvas {
display:block;
border: 1px solid;
position: absolute;
padding: 0;
margin:0;
z-index: 1;
}
尝试将所有事件侦听器添加到 #container 元素而不是 canvas，我假设 canvas 的宽度和高度相同。
将 pointer-events:none; 添加到 canvas 元素时。 属性 取消当前层上的所有用户事件并将它们传递给下面的元素。
// ====================== drawing canvas
const ctx = c.getContext('2d');
const $container= document.querySelector('#container');
// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
c.width = window.innerWidth;
c.height = window.innerHeight;
/**
* Your drawings need to be inside this function otherwise they will be reset when
* you resize the browser window and the canvas goes will be cleared.
*/
drawStuff();
}
resizeCanvas();
function drawStuff() {
// do your drawing stuff here//
const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
$container.onmouseover = e => {
// add a new path object
pathes.push({
pts: [], // an array of points
dashed: check.checked // boolean
});
mouse_down = true; // we should draw
}
$container.onmouseup = c.onmouseleave = e => mouse_down = false;
$container.onmousemove = throttle(e => {
if (!mouse_down) {
return;
} else {
const rec = c.getBoundingClientRect();
// add a new point
addPoint(e.clientX - rec.left, e.clientY - rec.top);
redraw(); // redraw everything
}
});
function redraw() {
ctx.clearRect(0, 0, c.width, c.height); // we clear everything
// and draw every pathes
pathes.forEach(path => {
ctx.setLineDash(path.dashed ? [5, 5] : [0]);
// set line color
// ctx.strokeStyle = '#FFFFFF';
ctx.beginPath();
path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
ctx.stroke();
})
}
function addPoint(x, y) {
// append to the last one
const points = pathes[pathes.length - 1].pts;
points.push({
x: x,
y: y
});
}
// just to avoid unnecessary drawings
function throttle(callback) {
if (typeof callback !== 'function')
throw 'A callback function must be passed';
var active = false;
var evt;
var handler = function() {
active = false;
callback(evt);
};
return function handleEvent(e) {
evt = e;
if (!active) {
active = true;
requestAnimationFrame(handler);
}
};
}
}
//================ randomizing columns====================
let mediaElements = [...document.getElementsByClassName("col")];
// this is where u assign the array for the list of src (or randomise it)
//array.forEach(function(currentValue, index, arr), thisValue)
//put the range in an array
function range(start, end) {
var ans = [];
for (let i = start; i <= end; i++) {
ans.push(i);
}
return ans;
}
//shuffle the array
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
//now shuffle order
let orderNumber = range(1, mediaElements.length);
let shuffled = shuffle(orderNumber);
//console.log(shuffled); // [5, 3, 1, 2, 4]
//assign order somehow lmao
mediaElements.forEach(y => {
// this is where u add or the src
// y is each of the img
//console.log(y)
y.style.order = shuffled.shift()
});
/* canvas {
border: 1px solid;
} */
/* CSS files add styling rules to your content */
html {
margin: 0px;
}
body {
margin: 0;
padding: 0;
margin-bottom: 0;
margin-top: 0;
/* background-color: black; */
height: 100%;
margin-top: 0%;
padding: 0%;
}
.row {
display: flex;
flex-direction: row;
height: 100vh;
width: 100vw;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
margin-left: 0px;
margin: 0px;
}
.col {
height: 100%;
width: 300px;
position: relative;
border-right: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
border-bottom: 0.5px #EDE7DD solid;
flex-shrink: 0;
margin-bottom: 0px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
}
/* .col:hover {
background-color: pink;
} */
img.media-overlay {
position: absolute;
padding: 0;
margin: 0;
display: none;
border-bottom: 0.5px #EDE7DD solid;
border-top: 0.5px #EDE7DD solid;
}
.col:hover img {
display: block;
}
img.col-1 {
max-width: 300px;
}
img.col-2 {
max-width: 600.5px;
/* add border width 600 */
}
img.left {
left: 0;
}
img.right {
right: 0;
}
img.top {
top: 0;
border-top: 0px black solid;
}
img.bottom {
bottom: 0;
border-bottom: 0px black solid;
}
@media (max-width: 480px) {
/* ==============
row takes up the entire screen
need to take care of the images or media-overlays too
============== */
.col {
width: 100%;
}
/* ==============
columns turn into rows
need to take care of the images or media-overlays too
width of rows, and border (bottom)
============== */
/* .row {
flex-direction: column;
} */
}
h3 {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
/* color:#FFC6C0; */
font-family: nimbus-sans, sans-serif;
font-weight: 700;
font-style: normal;
}
p {
padding-left: 30px;
padding-right: 30px;
color: #EDE7DD;
font-family: nimbus-sans, sans-serif;
font-weight: 300;
font-style: normal;
}
.bottomText {
position: absolute;
bottom: 0;
z-index: -1;
}
canvas {
display: block;
border: 1px solid;
position: absolute;
padding: 0;
margin: 0;
z-index: 1;
pointer-events:none;
/* overflow: auto; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- nimbus sans -->
<!-- bold -->
<link rel="stylesheet" href="https://use.typekit.net/oub0bcu.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<label>
<input type="checkbox" id="check" checked style="display:none"/></label
><br />
<div class="container" id='container'>
<canvas id="c" width="100%" height="100%"></canvas>
<div class="row" id="row">
<div class="col" id="col1">
<h3>Abbie Lilley & Indiya Tupe</h3>
<p>
“Unearth is a campaign intending to inspire a deeper exploration and richer interactions with our surroundings
in order to apprehend a deeper embrace of natural and urban environments. Animating the lyrics of Nothing but
Flowers by Talking Heads, playful juxtapositions are at the heart of our environmental centred campaign;
investigating a place’s potential to transform typographic led interventions and inform visual language.”</p>
<img class="media-overlay col-1 left top" id="img1" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport2.jpg?v=1595172025095" alt="port2" />
</div>
<div class="col " id="col2">
<img class="media-overlay col-1 left bottom " id="img2" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport1.jpg?v=1595172012754" alt="port1" />
<div class= "bottomText">
<h3>Mayli Mountford</h3>
<p>
“An unconventional rebrand of 'Britishness' so it accurately represents contemporary ’British' Identity to
promote and represent all people and culture in the United Kingdom. An aspect I decided to rebrand was British
slang and language - there are typical British sayings but I knew there are other sayings from other cultures
that are spoken in the UK.
<br><br>People of different ethnicities have been born, grown up here, and consider themselves British and yet
the British identity does not represent them? Maybe Britain wouldn’t be so divided, if Britain actually
represented Britain?
</p>
</div>
</div>
<div class="col" id="col3">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland1.jpg?v=1595171993148" id="img3" alt="land1" />
<h3>3</h3>
<p></p>
</div>
<div class="col" id="col4">
<img class="media-overlay col-1 right bottom " src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img4" alt="port3" />
<h3>4</h3>
<p></p>
</div>
<div class="col" id="col5">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img5" alt="land2" />
<h3>5</h3>
<p></p>
</div>
<div class="col" id="col6">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fland2.png?v=1595172018931" id="img6" alt="land2" />
<h3>6</h3>
<p></p>
</div>
<div class="col" id="col7">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img7" alt="land2" />
<h3>7</h3>
<p></p>
</div>
<div class="col" id="col8">
<img class="media-overlay col-2 right top" src="https://cdn.glitch.com/b8a16f28-5a0d-40f6-bede-673c5c7bf326%2Fport4.jpeg?v=1595172032309" id="img8" alt="land2" />
<h3>8</h3>
<p></p>
</div>
</div>
</div>
</body>
</html>
阅读@t1m0n 的回答，我解决了我的问题。并且没有将 'pointer-events:none;' 添加到 canvas。只需设置 canvas 的 z-index 也可以。