#javascript #html #canvas #html5-canvas
#javascript #HTML #холст #html5-canvas
Вопрос:
У меня странная ошибка, которая позволяет моему коду Javascript работать правильно, только если открыты инструменты разработчика Chrome. Я прочитал все другие статьи с различными решениями, включая удаление всех операторов 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 amp; 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 amp; 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 amp; 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 amp; 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 amp; 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:UsersjavieDocumentsRecognizerbundle.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()
Как я уже сказал, что меня действительно беспокоит, так это то, что если я переместил холст наверх или удалил некоторые изображения, то холст можно правильно нарисовать. Я чувствую, что если я помещу холст на другую страницу, это определенно сработает, но я не хочу, чтобы меня заставляли отделять холст от изображений, поскольку они важны вместе, и я бы очень предпочел, если бы он был под изображениями.
Есть ли проблема с количеством изображений, которые могут быть на странице? Или, возможно, ограничение потока холстов на странице?
Комментарии:
1. почему вы вызываете
init()дважды?2. Вы используете множество глобальных переменных без каких-либо объявлений. Это полный исходный код JavaScript? Для вашего
<canvas>тега требуется закрывающий тег — это не самозакрывающийся тег HTML5.3. @RandyCasburn хороший улов, я удалил один из тегов body, который вызывал его onload; по какой-то причине init() не вызывается. Именно поэтому я вызываю его в файле JavaScript.
4. @RandyCasburn Я объявил глобальные переменные в начале, отредактировал вопрос, чтобы включить полный исходный код JavaScript. Спасибо. И да, у меня есть тег canvas, закрытый в фактическом исходном коде.
5. Пожалуйста, предоставьте полный воспроизводимый пример, который любой может запустить на своем ПК
Ответ №1:
У вас неправильные вычисления для xy, которые выходят за рамки canvas.
Если ваш холст расположен внизу страницы со свитком
canvas.offsetTop это будет пространство от начала прокрутки (увеличивается до бесконечности при увеличении прокрутки), но e.clientY будет увеличиваться до высоты окна (высоты отображения), которая является фиксированным числом.
Я бы предложил использовать MouseEvent.offsetX, который поддерживается в ie9 , и протестировать его в разных условиях в разных браузерах. Я протестировал его в 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();
}
}
}