HTML5 Canvas Javascript 如何制作光滑的笔刷

Question

你好，我需要像这样制作光滑的笔刷：

我尝试创建它，制作圆圈并填充它，但结果不成功：

可以看到圆圈..这不像第一个例子那样平滑我的示例代码：

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 );
}

var el = document.getElementById('c');
var ctx = el.getContext('2d');

//ctx.fillStyle = "rgba('255, 0, 0, 0.1')";
ctx.fillStyle = "red";
ctx.strokeStyle = "red";
ctx.globalAlpha = "0.05";
ctx.lineWidth = 0;
ctx.globalCompositeOperation = "source-over"; 

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+=5) {
    x = lastPoint.x + (Math.sin(angle) * i) - 25;
    y = lastPoint.y + (Math.cos(angle) * i) - 25;
    ctx.beginPath();
    ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  
  lastPoint = currentPoint;
};

el.onmouseup = function() {
  isDrawing = false;
};

function clearit() {
  ctx.clearRect(0,0, 1000, 1000);
}

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>
<input type="button" id="clear-btn" value="Clear it" onclick="clearit()">

http://codepen.io/anon/pen/NPjwry

Answer 1

尝试使用更小的 globalAlpha 并减小步进（以便绘制更多圆圈）

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 );
}

var el = document.getElementById('c');
var ctx = el.getContext('2d');

//ctx.fillStyle = "rgba('255, 0, 0, 0.1')";
ctx.fillStyle = "red";
ctx.strokeStyle = "red";
ctx.globalAlpha = "0.01";
ctx.lineWidth = 0;
ctx.globalCompositeOperation = "source-over"; 

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+=3) {
    x = lastPoint.x + (Math.sin(angle) * i) - 25;
    y = lastPoint.y + (Math.cos(angle) * i) - 25;
    ctx.beginPath();
    ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
  
  lastPoint = currentPoint;
};

el.onmouseup = function() {
  isDrawing = false;
};

function clearit() {
  ctx.clearRect(0,0, 1000, 1000);
}

canvas { border: 1px solid #ccc }

<canvas id="c" width="500" height="300"></canvas>
<input type="button" id="clear-btn" value="Clear it" onclick="clearit()">

更新代码笔：http://codepen.io/gpetrioli/pen/ramqBz

Answer 2

还有更简单的解决方案：将线宽设置为25px

let ctx = this.d.transparentUpdateImage.getContext('2d');

if (!this.lastPos) {
    this.lastPos = {x: x, y: y};
    return
}

ctx.beginPath();
ctx.moveTo(this.lastPos.x, this.lastPos.y);
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = 'red';
ctx.lineWidth = 25;
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();

this.lastPos = {x: x, y: y};

HTML5 Canvas Javascript 如何制作光滑的笔刷

HTML5 Canvas Javascript how to make smooth brush

javascript

html

canvas

brush