【发布时间】：2014-07-16 14:52:49
【问题描述】：
这是我的难题。我使用来自在线资源的一些代码使用画布绘制了一个矩形，并一直在调整它以满足我的需要。原始代码运行良好，但它被清楚地编码为从窗口的左上角开始；我从代码中了解了这么多。由于我的页面要求它相对于画布位置，而不是窗口，这对我来说是个问题。单击矩形开始时，实际的矩形开始在光标下方绘制一段距离；然而，画布从 (0,0) 开始向下和向右。如何让它将画布视为用于定义起点的窗口？
JavaScript：
function getarea() {
var wid = document.getElementById('wid').value;
var hgt = document.getElementById('hgt').value;
var area = (wid*hgt)
var perim = (+wid + +hgt + +wid + +hgt)
window.document.getElementById('area').innerHTML = area;
window.document.getElementById('perim').innerHTML = perim;
}
var rect;
var canvas;
var context;
var dragging;
function Point(x, y) {
this.x = x;
this.y = y;
}
function Size(width, height) {
this.width = width;
this.height = height;
}
function Rectangle(start, size) {
this.start = start;
this.size = size;
}
function init() {
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.addEventListener("mousedown", startDragging, false);
canvas.addEventListener("mouseup", stopDragging, false);
canvas.addEventListener("mousemove", moved, false);
var start = new Point(0, 0);
var size = new Size(0, 0);
rect = new Rectangle(start, size);
}
function startDragging(event) {
clearRect(rect);
dragging = true;
// initialize start point
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
rect.start.x = mouseX;
rect.start.y = mouseY;
// initialize size
rect.size.width = 0;
rect.size.height = 0;
}
function stopDragging(event) {
dragging = false;
}
function moved(event) {
if(!dragging) return;
var box=canvas.getBoundingClientRect();
var offsetX=box.left;
var offsetY=box.top;
var mouseX = parseInt(event.clientX-offsetX);
var mouseY = parseInt(event.clientY-offsetY);
clearRect(rect);
rect.size.width = event.pageX - rect.start.x;
rect.size.height = event.pageY - rect.start.y;
drawRect(rect);
}
function clearRect(rect) {
context.clearRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
function drawRect(rect) {
context.fillRect(rect.start.x, rect.start.y, rect.size.width, rect.size.height);
}
HTML（通常与 JavaScript 问题无关，但我将其包括在内，因为 HTML 中定义的空间量与问题有关。我怀疑它是否重要，但以防万一。）：
<html>
<head>
<script src="week5js.js"></script>
<link rel="stylesheet"href="assignment5.css"/>
<link href="assignment5.css" rel="stylesheet" type="text/css">
</script>
</head>
<header>
<center>
Week 6: Unit 6 - Assignment 5
</center>
</header>
<body onload="init()">
<form id="areaform">
<label for="width">Width:</label>
<input id="wid" name="width" type="number">
 
 
<label for="height">Height:</label>
<input id="hgt" name="height" type="number">
<br></br>
<label for="area1">Area:</label>
<output id="area"></output>
<br></br>
<label for="perimeter1">Perimeter:</label>
<output id="perim"></output>
<br></br>
<button onclick="getarea()" type="button">Get Area</button>
</form>
<canvas id="canvas" width="673" height="550"></canvas>
</body>
</html>
CSS
canvas {
background-color: #F0F0F0;
border: 1px solid;
}
header{
background-color: yellow;
padding:15px;
margin:30px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:25px;
background-color:#F0F0F0;
border: 1px solid;
}
body{
max-width:50%;
padding:25px;
margin:20px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:16x;
border: 2px dotted;
box-shadow: 2px 2px 4px #404040;
}
body img{
max-width:100%;
}
所以，总而言之：我需要能够从一个站点绘制一个矩形，当我这样做时，矩形起点受到画布与窗口的关系的影响，并且把所有东西都弄乱了，把矩形放在不同的位置点超出预期。我需要从光标处开始的矩形。
谢谢！
【问题讨论】：
-
与其在处理程序中使用
pageX和pageY属性，不如考虑使用offsetX和offsetY属性。它们相对于事件处理程序附加到的 元素 的左上角，而不是整个页面本身。
标签： javascript canvas dimensions