クリックしてキャンバスに四角形を作成できる単純なページを作成しようとしています。ユーザーのマウスクリックを入力として受け取り、クリックのxとyから四角形を作成します。しかし、それはある程度の長方形を側面に置いています。なぜ私はその理由がわかりません。私はこのキャンバス上に作成している矩形が正しい場所に配置されないのはなぜですか?
フィドル:https://jsfiddle.net/2717s53h/
HTML
<canvas id="cnv"></canvas>
CSS
#cnv{
width:99vw;
height:98vh;
background-color:#faefbd;
}
JAVASCRIPT
$(function() {
var canvas = $('#cnv');
var canvObj = document.getElementById('cnv');
var ctx = canvObj.getContext('2d');
var point1 = {};
var point2 = {};
canvas.click(function (e) {
console.log(e);
var x = e.pageX;
var y = e.pageY;
console.log(x);
console.log(y);
if (Object.keys(point1).length == 0)
{
point1.x = x;
point1.y = y;
}
else if (Object.keys(point2).length == 0)
{
point2.x = x;
point2.y = y;
console.log(point1);
console.log(point2);
var width = point2.x - point1.x;
var height = point2.y - point1.y;
width = width < 0 ? width * -1 : width;
height = height < 0 ? height * -1 : height;
ctx.fillRect(x, y, 10, 10);
point1 = {};
point2 = {};
}
});
});
[HTML5 JS fillRect()の不思議な動作]の複製があります(http://stackoverflow.com/questions/13557429/html5-js-fillrect-strange-behavior) – ieaglle