如何解决只有打开Chrome开发者工具后，JavaScript代码才能在Chrome中运行
我有一个怪异的错误，只有在打开Chrome开发者工具后，我的Javascript代码才能正常运行。我已经阅读了所有其他文章，并提供了不同的解决方案，其中包括删除所有console.log（）语句以及为jQuery AJAX禁用缓存（我没有使用jQuery），但是它们不起作用。
当它归结起来时，我有一个导航栏，一个视频容器，9张图片，然后我有一个要绘画的画布。该代码应该可以在画布上工作以允许绘图，但是只能在chrome开发人员工具打开的情况下工作。
奇怪的是，如果我删除6张图片，使得在画布上方仅剩下2张图片，则可以在不打开开发人员工具的情况下绘制画布。
我不认为这是“被绘制但只是不出现在屏幕上”的问题，因为我有正确的偏移量可以显示图形，即使我没有，也即使它不起作用，即使我打开了开发人员工具。
这是简化的html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<link href="https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900" rel="stylesheet">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">Buy <em>High,</em>Sell <em>Low</em> </a>
</div>
<div class="logo1">
<a href="https://jayvyer.github.io/">Javier <em>Liu</em></a>
</div>
</nav>
<div id="video-container">
<div class="video-overlay"></div>
<div class="video-content">
<div class="inner">
<h1>Welcome to <em>BHSL</em></h1>
<p style="font-size: 36px">Basic Trading Patterns</p>
<p style="font-size: 10px">Always buy at highest,sell at cheapest!</p>
<p style="font-size: 6px">Don't actually do this. Not financial advice.</p>
<div class="scroll-icon">
<a class="scrollTo" href="#portfolio"><img src="img/scroll-icon.png" alt=""></a>
</div>
</div>
</div>
<video autoplay="" loop="" muted>
<source src="increase_stonk.mp4" type="video/mp4" />
</video>
</div>
<div class="full-screen-portfolio" id="portfolio">
<div class="container-fluid">
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="triangles.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Ascending & Descending<em>Triangles</em></h1>
<p>Continuation Pattern</p>
</div>
</div>
<div class="image">
<img src="img/ascending_triangle5.png">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="cup-handle.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Cup <em> and Handle</em></h1>
<p>Continuation Pattern</p>
</div>
</div>
<div class="image">
<img src="img/cuphandle.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="flag-pennant.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Flags <em> and Pennants</em></h1>
<p>Continuation Pattern</p>
</div>
</div>
<div class="image">
<img src="img/flagpennant.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="rectangles.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Top and Bottom <em> Rectangles</em></h1>
<p>Continuation Pattern</p>
</div>
</div>
<div class="image">
<img src="img/rectangle.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="doubles.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Double <em> Tops & Bottoms</em></h1>
<p>Reversal Pattern</p>
</div>
</div>
<div class="image">
<img src="img/double.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="triples.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Triple <em> Tops & Bottoms</em></h1>
<p>Reversal Pattern</p>
</div>
</div>
<div class="image">
<img src="img/triple.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="wedges.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Falling & Rising <em> Wedges</em></h1>
<p>Reversal Pattern</p>
</div>
</div>
<div class="image">
<img src="img/wedge.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="2in1dandruffshampoo.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Head and <em>Shoulders</em></h1>
<p>Reversal Pattern</p>
</div>
</div>
<div class="image">
<img src="img/headshoulders.png">
</div></a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="portfolio-item">
<a href="diamonds.html">
<div class="hover-effect">
<div class="hover-content">
<h1>Diamond <em>Tops & Bottoms</em></h1>
<p>Reversal Pattern</p>
</div>
</div>
<div class="image">
<img src="img/diamond.png">
</div></a>
</div>
</div>
</div>
<div class="canvas_" style="text-align:center;background-color: #011423;">
<canvas id="can" width="400" height="400" style="top:0%;left: 10%;right: 500%;border:2px solid;margin: 20px;border-radius: 35px; border-width: medium; border-color: #311746;"></canvas>
<script type="text/javascript" src="C:\Users\javie\Documents\Recognizer\bundle.js"></script>
<!-- <div class="">
<span style="margin-right: 50px;"><button onclick="erase()" id="clearboard" style="background-color: #000000; border-radius: 50px; color: #ffffff">Clear Board</button></span>
<span><button onclick="fnClick()" id="my-button2" style="background-color: #000000; border-radius: 50px; color: #ffffff">Calculate Similarity</button></span>
<br><br>
</div> -->
</div>
</div>
</body>
</html>
这是JavaScript文件：
var canvas,ctx,flag = false,prevX = 0,currX = 0,prevY = 0,currY = 0,dot_flag = false,coordinates = [];
var curvematcher = require('curve-matcher')
const init = () => {
canvas = document.getElementById('can');
canvas.style.backgroundColor = "#fffcf5";
ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth * .80;
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove",function (e) {
findxy('move',e)
},false);
canvas.addEventListener("mousedown",function (e) {
findxy('down',false);
canvas.addEventListener("mouseup",function (e) {
findxy('up',false);
canvas.addEventListener("mouseout",function (e) {
findxy('out',false);
}
const draw = () => {
ctx.beginPath();
ctx.moveTo(prevX,prevY + 669);
ctx.lineTo(currX,currY + 669);
console.log("x: " + currX + " y: " + currY);
coordinates.push({x:prevX,y: prevY + 669});
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
ctx.stroke();
ctx.closePath();
}
const erase = () => {
var m = confirm("Are you sure you want to clear the entire board?");
// coordinates.forEach((item,i) => {
// console.log(" {x: " + coordinates[i].x + ",y: " + coordinates[i].y + "},");
// });
if (m) {
coordinates = [];
ctx.clearRect(0,w,h);
}
}
const findxy = (res,e) => {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
init()
就像我说的那样，真正困扰我的是，如果我将画布向上移动，或者如果我删除了一些图像，那么可以正确地绘制画布。我觉得如果将画布放在另一页上就可以正常工作，但是我不想被迫将画布与图像分开，因为它们很重要，如果在下面，我将非常希望图片。
在一个页面上可以显示多少张图像是否存在问题？还是对页面上的画布流有限制？
解决方法
您对xy的计算不正确，超出了画布范围。
如果您的画布在滚动条中位于页面的下方
canvas.offsetTop等于滚动开始时的空间（滚动增长时，增长到无穷大），但是e.clientY增长到窗口高度（显示高度），这是一个固定数字。
我建议使用ie9 +支持的mouseEvent.offsetX，并在不同的浏览器上以不同的条件对其进行测试。我在Chrome中对其进行了测试，并且在没有滚动的情况下也可以完美运行。
const findxy = (res,e) => {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.offsetX;
currY = e.offsetY;
flag = true;
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.offsetX;
currY = e.offsetY;
draw();
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
