使用 JavaScript 在画布上的光标位置绘制

Drawing at cursor position on canvas with JavaScript

本文关键字：光标 位置 绘制 JavaScript 使用      更新时间：2023-09-26

我正在尝试通过单击并拖动鼠标在画布上绘制。我的问题是，除了线条质量很差（我想要更明显的边框）之外，它只在 0,0 处时才尊重鼠标位置。当我将鼠标移动到下角时，线条与它的距离增加，就像我在画布中间时一样多，线条已经离开了它。我的代码在：http://jsfiddle.net/ajTkP/12/

我也将在这里发布它：

var MDown = false;
var Color = 'blue';
var Canvas = document.getElementById('canvas');
var Context = Canvas.getContext('2d');
Canvas.onselectstart = function() { return false; };
Canvas.unselectable = "on";
Canvas.style.MozUserSelect = "none";
Canvas.onmousedown = function(e) {
    MDown = true;
    Context.strokeStyle = Color;
    Context.lineWidth = 3;
    Context.lineCap = 'round';
    Context.beginPath();
    Context.moveTo(e.pageX - Position(Canvas).left, e.pageY - 5);
}
Canvas.onmouseup = function() { MDown = false; };
Canvas.onmousemove = function(e) { 
    if (MDown) {
        Context.lineTo(e.pageX - Position(Canvas).left, e.pageY - 5);
        Context.stroke();
    }
}
function Position(el) {
    var position = {left: 0, top: 0};
    if (el) {
        if (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            position.left += el.offsetLeft;
            position.top += el.offsetTop;
        }
    }
    return position;
}

感谢您的帮助！

您需要在

画布上设置显式width和height。 画布的默认尺寸为宽度为 300，高度为 150（请参阅此处的规范）。 通过CSS设置宽度和高度，您只需拉伸画布。

执行以下任一操作：

<canvas id="canvas" width="300" height="200"></canvas>

或通过 JavaScript 设置宽度/高度：

canvas.width = 300;
canvas.height = 200;

请参阅更新的 jsfiddle： http://jsfiddle.net/ajTkP/13/

看起来 jimr 在画布高度和宽度方面击败了我。

不过，线条的质量很差是由于你画线的方式造成的。您会注意到，您在每个 onmousemove 事件上都调用了stroke()。请记住，它会跟踪从beginPath()到closePath()的线路路径，因此您基本上会多次抚摸同一条线（每次鼠标移动时）。这就是为您提供锯齿（块状）线条的原因，而不是您期望的平滑抗锯齿线条。

相关文章：