如何使用html canvas和javascript绘制一条平滑的连续线

发布时间：2020-12-14 21:13:15 所属栏目：资源来源：网络整理

导读：我正在尝试使用html5 canvas和普通javascript创建一个简单的绘制/绘制程序.我的工作正常,但是当绘制和移动鼠标太快时,线路断开连接,我最终得到一条点线 – 我怎样才能使它成为一条平滑的连续线？建议将不胜感激！我是JS的新手,所以代码示例非常有用,提前感

我正在尝试使用html5 canvas和普通javascript创建一个简单的绘制/绘制程序.我的工作正常,但是当绘制和移动鼠标太快时,线路断开连接,我最终得到一条点线 – 我怎样才能使它成为一条平滑的连续线？

建议将不胜感激！我是JS的新手,所以代码示例非常有用,提前感谢.

目前的JS是：

var canvas,ctx
var mouseX,mouseY,mouseDown = 0

function draw(ctx,x,y,size) {
  ctx.fillStyle = "#000000"
  ctx.beginPath()
  ctx.arc(x,size,Math.PI*2,true)
  ctx.closePath()
  ctx.fill()
}

function clearCanvas(canvas,ctx) {
  ctx.clearRect(0,canvas.width,canvas.height)
}

function onMouseDown() {
  mouseDown = 1
  draw(ctx,mouseX,2)
}

function onMouseUp() {
  mouseDown = 0
}

function onMouseMove(e) {
  getMousePos(e)
  if (mouseDown == 1) {
      draw(ctx,2)
  }
}

function getMousePos(e) {
  if (!e)
      var e = event
  if (e.offsetX) {
      mouseX = e.offsetX
      mouseY = e.offsetY
  }
  else if (e.layerX) {
      mouseX = e.layerX
      mouseY = e.layerY
  }
 }

function init() {
    canvas = document.getElementById('sketchpad')
    ctx = canvas.getContext('2d')
    canvas.addEventListener('mousedown',onMouseDown,false)
    canvas.addEventListener('mousemove',onMouseMove,false)
    window.addEventListener('mouseup',onMouseUp,false)
}
init();

<canvas id="sketchpad" width="500" height="500"></canvas>

解决方法

您可以保存最后一个位置并在最后一个点和实际点之间画一条线.

if (lastX && lastY && (x !== lastX || y !== lastY)) {
    ctx.fillStyle = "#000000";
    ctx.lineWidth = 2 * size;
    ctx.beginPath();
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(x,y);
    ctx.stroke();
    // ...
   lastX = x;
   lastY = y;
}

在mouseup事件中,将两个变量设置为零.

var canvas,mouseDown = 0,lastX,lastY;

function draw(ctx,size) {
    if (lastX && lastY && (x !== lastX || y !== lastY)) {
        ctx.fillStyle = "#000000";
        ctx.lineWidth = 2 * size;
        ctx.beginPath();
        ctx.moveTo(lastX,lastY);
        ctx.lineTo(x,y);
        ctx.stroke();
    }
  ctx.fillStyle = "#000000";
  ctx.beginPath();
  ctx.arc(x,true);
  ctx.closePath();
  ctx.fill();
  lastX = x;
  lastY = y;
}

function clearCanvas(canvas,2)
}

function onMouseUp() {
  mouseDown = 0;
  lastX = 0;
  lastY = 0;
}

function onMouseMove(e) {
  getMousePos(e)
  if (mouseDown == 1) {
      draw(ctx,false)
}

init();

<canvas id="sketchpad" width="600" height="300"></canvas>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!