1
JSでコードを書いたので、ユーザーは画面をクリックして四角形を作成し、四角形のサイズを大きくしてからスタンプすることができます。問題は、マウスが最初にクリックされた位置から移動すると、マウスが押し下げられている間に正方形のサイズが増加する速度が遅くなることです。私は間隔を使って1ミリ秒の時間をかけてサイズを変更しています。以下はJSコード（Jqueryを使用）です：
更新：コードスニペットを実行すると、問題は表示されません。ファイルとして保存して実行すると、おそらく問題が発生します。マウスの動きがJavascriptの間隔に影響するのはなぜですか？
<!DOCTYPE html>
<html>
<head>
\t <title>My Canvas</title>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
\t <script type="text/javascript">
\t $(function() {
\t \t var mouseDown
\t \t var c = document.getElementById('myCanvas');
\t \t var ctx = c.getContext("2d");
\t \t var objects = []
\t \t c.addEventListener("mousedown", onMouseDown);
\t \t c.addEventListener("mouseup", onMouseUp);
\t \t function createSquare(x, y, size) {
\t \t \t this.x = x;
\t \t \t this.y = y;
\t \t \t this.size = size;
\t \t \t this.draw = draw;
\t \t \t this.drawStylus = drawStylus;
\t \t \t this.clear = clear;
\t \t };
\t \t function draw() {
\t \t \t ctx.fillRect(this.x, this.y, this.size, this.size);
\t \t };
\t \t function drawStylus() {
\t \t \t ctx.fillRect(this.x, this.y, this.size, this.size);
\t \t };
\t \t function clear() {
\t \t \t ctx.clearRect(this.x, this.y, this.size, this.size);
\t \t }
\t // \t var mySquare = new createSquare(100,100,100);
\t // \t mySquare.draw();
\t \t function onMouseDown() {
\t \t \t mouseDown = true
\t \t \t x = event.clientX
\t \t \t y = event.clientY
\t \t \t size = 100
\t \t \t console.log('clicked')
\t \t \t interval = setInterval(function() {
\t \t \t \t size = size + 5
\t \t \t \t var cursorSquare = new createSquare(x,y,size);
\t \t \t \t cursorSquare.clear();
\t \t \t \t cursorSquare.drawStylus();
\t \t \t }, 1);
\t \t };
\t function onMouseUp() {
\t \t console.log('up')
\t \t if (mouseDown) {
\t \t clearInterval(interval);
\t \t var newSquare = new createSquare(x,y,size);
\t \t newSquare.draw();
\t \t mouseDown = false
\t \t \t };
\t };
\t });
\t </script>
</head>
<body>
<canvas id='myCanvas' width="5000" height="5000" style="border:1px solid #000000;">
\t
</canvas>
</body>
</html>
私はコードスニペットを実行すると私はあなたの話すのが遅くなるのを見ていない – Observer
それはそれが私のPCから直接開いたファイルである場合にのみ表示されます。そのスニペットをHTMLファイルに貼り付ける場合は、Chromeで開き、問題が発生する可能性があります。 –
Chromeを使用してコンテンツに貼り付けられたファイルからも表示されません。 –