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画布绘制透明圆圈

回答

相关问题