Javascript HTML5畫布繪製透明圓圈

我需要一個函數在畫布上以mousedown開頭在center = x，y處拖動幾個圓，然後將鼠標拖動到deltaX，deltaY，從而爲每個圓創建半徑r。圓圈不能有填充（需要它們透明），以便用戶可以清楚地看到圓圈截取的位置。我當前的代碼在拖動鼠標的同時繪製圓圈，這是預期的，但它也會留下那些額外的圓圈。我只需要在mouseup上留下圈子。任何幫助表示讚賞。謝謝：）。Javascript HTML5畫布繪製透明圓圈

<html> 
 

 
<head> 
 

 
</head> 
 

 
<body style="margin:0"> 
 
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas> 
 

 
<script> 
 

 
var canvas=document.getElementById('canvas'); 
 
var context=canvas.getContext('2d'); 
 
var radius=50; 
 
var nStartX = 0; 
 
var nStartY = 0; 
 
var bIsDrawing = false; 
 
var putPoint = function(e){ 
 
    nStartX = e.clientX;nStartY = e.clientY; 
 
    bIsDrawing = true; 
 
    radius = 0; 
 
} 
 
var drawPoint = function(e){ 
 
    if(!bIsDrawing) 
 
    return; 
 
    
 
    var nDeltaX = nStartX - e.clientX; 
 
    var nDeltaY = nStartY - e.clientY; 
 
    radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY) 
 
    context.beginPath(); 
 
    context.arc(nStartX, nStartY, radius, 0, Math.PI*2); 
 
    context.strokeStyle="#000000"; 
 
    //context.fillStyle="#FFFFFF"; 
 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
 
    context.stroke(); 
 
    context.fill(); 
 
} 
 
var stopPoint = function(e){ 
 
    //context.clip(); 
 
    //context.clearRect(0, 0, canvas.width, canvas.height); 
 
    bIsDrawing = false; 
 
} 
 
canvas.addEventListener('mousedown',putPoint); 
 
canvas.addEventListener('mousemove',drawPoint); 
 
canvas.addEventListener('mouseup',stopPoint); 
 

 
</script> 
 
</body> 
 

 
</html>

來源

2016-04-14 Sobra

使用兩個畫布。在*頂部*上繪製當前處理的圓，並按間隔清除它。在底部*上，您可以在不清除的情況下畫出最終結果。或者跟蹤所有的圈子並不斷重畫。 – Yoshi

我也有一個小提琴，如果你的圓圈可以橢圓http://jsfiddle.net/xXqsu/2/ –

你需要跟蹤的圓圈（以及其它對象），你所繪製 - 一個方法是將他們推入對鼠標鬆開陣列。然後每個繪圖都應該在畫布之前清楚地繪製並重繪已保存的圓圈。

var circles = []; 
...

清除畫布

... 
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY) 
context.clearRect(0, 0, canvas.width, canvas.height); 
...

圖紙保存圈

... 
context.fill(); 
// drawing saved circles 
circles.forEach(function(circle){ 
    context.beginPath(); 
    context.arc(circle.nStartX, circle.nStartY, circle.radius, 0, Math.PI*2); 
    context.strokeStyle="#000000"; 
    context.fillStyle="#FFFFFF"; 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
    context.stroke(); 
    context.fill(); 
}) 
...

保存完成圈

... 
bIsDrawing = false; 
// saving completed circles 
var nDeltaX = nStartX - e.clientX; 
var nDeltaY = nStartY - e.clientY; 
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY); 
circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius }); 
...

小提琴 - https://jsfiddle.net/9x77sg2h/

來源

2016-04-14 12:32:44 potatopeelings

建立在我的評論，這是一個跟蹤所有圈子的例子。它基本上與potatopeelings的答案相同，但我想顯示requestAnimationFrame的用法獨立於用戶行爲重新繪製。

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
var circles = []; 
 
var currentCircle = null; 
 

 
requestAnimationFrame(function draw() { 
 
    drawCircles(); 
 
    requestAnimationFrame(draw); 
 
}); 
 

 
function putPoint(e){ 
 
    currentCircle = { 
 
     center: { 
 
      x: e.clientX - this.offsetLeft + window.scrollX, 
 
      y: e.clientY - this.offsetTop + window.scrollY 
 
     } 
 
    }; 
 
} 
 

 
function drawPoint(e) 
 
{ 
 
    if (null !== currentCircle) { 
 
     currentCircle.radius = Math.sqrt(
 
       Math.pow(currentCircle.center.x - e.clientX + this.offsetLeft - window.scrollX, 2) 
 
      + Math.pow(currentCircle.center.y - e.clientY + this.offsetTop - window.scrollY, 2) 
 
     ); 
 
    } 
 
} 
 

 
function drawCircles() 
 
{ 
 
    // clear canvas 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    // previous 
 
    circles.forEach(drawCircle); 
 

 
    // current 
 
    if (null !== currentCircle) { 
 
     drawCircle(currentCircle); 
 
    } 
 
} 
 

 
function drawCircle(circle) 
 
{ 
 
    context.save(); 
 
    context.beginPath(); 
 
    context.arc(circle.center.x, circle.center.y, circle.radius, 0, 2 * Math.PI); 
 
    context.strokeStyle= '#000000'; 
 
    context.fillStyle = 'rgba(0, 0, 0, 0)'; 
 
    context.stroke(); 
 
    context.fill(); 
 
    context.restore(); 
 
} 
 

 
function stopPoint() 
 
{ 
 
    if (null !== currentCircle) { 
 
     circles.push(currentCircle); 
 
     currentCircle = null; 
 
    } 
 
} 
 

 
canvas.addEventListener('mousedown', putPoint, false); 
 
canvas.addEventListener('mousemove', drawPoint, false); 
 
canvas.addEventListener('mouseup', stopPoint, false);

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

來源

2016-04-14 12:45:53 Yoshi

Javascript HTML5畫布繪製透明圓圈

回答

相關問題