主页 / 问题 / 979127
Accepted
zeni1agent
Asked:2020-05-08 04:01:22 +0000 UTC2020-05-08 04:01:22 +0000 UTC

当我在急转弯时用刷子绘画时如何修复错误？

  • 772

我有这个代码

can = document.getElementById('canvas'); 
can.width = 500; 
can.height = 500; 

var ctx = can.getContext('2d'); //Выбрать пространство

//Функция рисования
$( "#canvas" ).dblclick(function() {
  ctx.closePath();
  ctx.fill();//Заполнение 
  ctx.beginPath();
});

can.addEventListener('mousedown', function(e){
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'red' //Цвет	
  ctx.lineTo(e.clientX, e.clientY); //Координаты линий
  ctx.lineWidth = 10;//Толщина линий
  ctx.arc(e.clientX, e.clientY, 10 / 20 ,0, Math.PI * 2);	 //Круг
  ctx.stroke();
});
#canvas{
     background-color:#46bba4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="display: block;"></canvas>

之后，问题是为什么画笔在急转弯时会移到一边。为什么在改变 can.width 的大小时；和 can.height; 画笔的中心远离光标的地方 谁能帮忙解决这个问题？

javascript

1 个回答

  1. Best Answer
    1. 您在一帧内按顺序绘制，这可能是可能的，但我的做法不同，请参阅我的示例，我将点收集到数组中并每次重绘整个帧。

    在您的情况下，事实证明所有线条（圆圈和您绘制的线条）都被绘制为一条线的一部分，因此您不期望的行为

    1. 急转弯时会出现强烈的悬垂miter（曲线部分的连接类型，这是在画布上绘制线条的默认值），类型可以更改为round，连接将被舍入。

    在此处输入图像描述

    1. 在计算点击坐标时，您没有考虑画布在屏幕上的位置。

    2. 要在计算坐标时考虑滚动，请使用e.pageX和e.pageY 

    var can = document.getElementById('canvas'); 
can.width = 500; 
can.height = 500; 
let x, y;
var ctx = can.getContext('2d'); //Выбрать пространство
let pts = [[]];

$( "#canvas" ).dblclick(function() {
  pts[pts.length-1].pop(); //удалим повторную точку
  pts.push([]) // новая коллекция точек
  repaint();
});

can.addEventListener('mousedown', function(e){
  pts[pts.length-1].push([
    e.pageX - e.target.offsetLeft,
    e.pageY - e.target.offsetTop
  ]);
  repaint();
});

function repaint(){
  ctx.clearRect(0,0,can.width,can.height)
  ctx.strokeStyle = 'red';
  ctx.fillStyle = 'red' //Цвет	
  ctx.lineWidth = 10;//Толщина линий
  ctx.lineJoin = "round";
  
  // рисуем фигуры
  pts.forEach((shape, j)=> {
    ctx.beginPath();
    shape.forEach((p, i) => {
      ctx[i ? 'lineTo' : 'moveTo'](...p);
    })
    if(j !== pts.length-1){ 
      ctx.fill();
      ctx.closePath();
    }
    ctx.stroke();
  })
  
  // рисуем синие точки только для последней фигуры
  pts[pts.length-1].forEach((p, i) => {
    ctx.strokeStyle = 'blue';
    ctx.beginPath();
    ctx.arc(...p, 10 / 20 ,0, Math.PI * 2);	 //Круг
    ctx.stroke();
  })
}
    #canvas{
    background-color:#46bba4;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" style="display: block;"></canvas>

    • 5

相关问题