[英]Javascript code only works in Chrome while Chrome Developer Tools are open
我有一个奇怪的错误，只有当 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', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, 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, 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();
}
}
}
AngularJs-仅在打开Chrome开发者工具时，$ watch才起作用
[英]AngularJs - $watch only works when Chrome Developer Tools is open
从 JavaScript 以编程方式打开 Safari / Google Chrome 开发者工具
[英]Open Safari / Google Chrome developer tools programmatically from JavaScript
使用Chrome开发人员工具只能看到一个JavaScript文件
[英]Only able to see one JavaScript file using Chrome developer tools
仅当我在Firebug或Chrome开发人员工具中向其中添加断点时，JavaScript才会执行
[英]JavaScript executes only if I add a breakpoint in it in Firebug or Chrome developer tools
如何使用Chrome开发人员工具执行一段JavaScript代码
[英]How to execute a piece of JavaScript code using Chrome developer tools
如何在Chrome开发者工具中排序最小化的javascript代码？
[英]how to sort minimalized javascript code in chrome developer tools?
从开发者工具调试 Chrome Javascript 引擎源代码
[英]Debugging Chrome Javascript engine source code from Developer Tools
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.