>我有以下Javascript，HTML和CSS代码
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function draw() {
var img = new Image();
img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';
var el = document.getElementById('DrawingPattern');
var ctx = el.getContext('2d');
ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;
el.onmousedown = function (e) {
isDrawing = true;
lastPoint = {x: e.clientX, y: e.clientY};
};
el.onmousemove = function (e) {
if (!isDrawing) return;
var currentPoint = {x: e.clientX, y: e.clientY};
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25;
y = lastPoint.y + (Math.cos(angle) * i) - 25;
ctx.drawImage(img, x, y);
}
lastPoint = currentPoint;
};
el.onmouseup = function () {
isDrawing = false;
};
}html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
width: 70%;
border: 3px solid #73AD21;
background: white;
overflow: visible;
}<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>整个代码有效，我遇到的唯一问题是当我开始在画布上绘图时，光标与光标的有效位置不对齐。因此，当我绘制时，它会在另一个位置上显示线条，高于或低于光标的实际位置。我已经尝试了不同的方法，但是，我想是某种扩展问题，但我无法解决它。
这是一个缩放问题。即使通过按百分比设置 CSS 宽度来缩放画布元素，绘图区域的大小也不会更改。您可以在屏幕空间中获得鼠标坐标，但在绘制时需要转换为画布空间。
为此，请通过考虑el.width(画布宽度(和el.offsetWidth(元素宽度(之间的差异来计算比例。由于画布通过保持纵横比按比例缩放，因此 X 和 Y 坐标可以使用相同的缩放比例。
我添加了一个elementScale()函数并更新了代码以将clientX乘以返回值并clientY。
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
function elementScale(el) {
return el.offsetWidth === 0 ? 0 : (el.width / el.offsetWidth);
}
function draw() {
var img = new Image();
img.src = 'http://www.tricedesigns.com/wp-content/uploads/2012/01/brush2.png';
var el = document.getElementById('DrawingPattern');
var ctx = el.getContext('2d');
ctx.lineJoin = ctx.lineCap = 'round';
var isDrawing, lastPoint;
el.onmousedown = function (e) {
var scale = elementScale(el);
isDrawing = true;
lastPoint = {x: e.clientX * scale, y: e.clientY * scale};
};
el.onmousemove = function (e) {
if (!isDrawing) return;
var scale = elementScale(el);
var currentPoint = {x: e.clientX * scale, y: e.clientY * scale};
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25;
y = lastPoint.y + (Math.cos(angle) * i) - 25;
ctx.drawImage(img, x, y);
}
lastPoint = currentPoint;
};
el.onmouseup = function () {
isDrawing = false;
};
}html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
width: 70%;
border: 3px solid #73AD21;
background: white;
overflow: visible;
}<body onload=draw()>
<canvas width="1024" height="649" id="DrawingPattern">
<!-- add fallback content-->
</canvas>
</body>就像DarthJDG说的，这是你的CSS的扩展问题。
您可以删除画布上的CSS宽度：70%，然后尝试像往常一样进行调整
CSS 代码
html, body {
color: #fff;
background: #000;
font-family: "Lucida Grande";
}
canvas{
position: static;
cursor: move;
margin: auto;
//width:70%; //REMOVED
border: 3px solid #73AD21;
background: white;
overflow: visible;
}
JAVASCRIPT 代码
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25; //CHANGED
y = lastPoint.y + (Math.cos(angle) * i) - 25; //CHANGED
ctx.drawImage(img, x, y);
}
只需删除CSS宽度，您的缩放将再次正常。