HTML5畫布的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()">

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